css css编写三角形和半圆

最新推荐文章于 2022-08-04 21:03:06 发布

林夕_______

最新推荐文章于 2022-08-04 21:03:06 发布

阅读量846

点赞数

分类专栏： Css 文章标签：三角形

本文链接：https://blog.csdn.net/jinyt_/article/details/77235429

版权

Css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

三角的四个方向可修改，根据：border-top-color:; border-bottom-color:; border-left-color:; border-right-color:;

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>三角形</title>
   <style>
      .icon-b {
         display: inline-block;
         width: 0px;
         height: 0px;
         border: 10px solid transparent;
         border-top-color: #2fa0ec;
         position: relative;
         left: 3px;
         top: 2px;
      }
   </style>
</head>
<body>
   <b class="icon-b"></b>
</body>
</html>

 
  < 
  style 
  > 
 
  .semicircle { 
 
  display: 
  inline-block; 
 
  width: 
  18px; 
 
  height: 
  29px; 
 
  border-radius: 
  18px 
  0 
  0 
  18px; 
  /* 左上、右上、右下、左下 */ 
 
  border: 
  1px 
  solid 
  #feb34a; 
 
  border-right: 
  #fff; 
 
  position: 
  relative; 
 
  top: 
  10px; 
 
  right: 
  -7px; 
 
       } 
 
  < 
  / 
  style 
  > 
 
  < 
  span 
  class= 
  "semicircle" 
  ></ 
  span 
  >

border-right设置右边线为白色；可改变为右图。

 
  < 
  style 
  > 
 
  .collection a{ 
 
  font-size: 
  14px; 
 
  padding: 
  9px 
  0 
  9px 
  10px; 
 
  color: 
  #feb34a; 
 
  text-decoration: 
  none; 
 
  border: 
  1px 
  solid 
  #feb34a; 
 
  border-top-left-radius: 
  22px; 
 
  border-bottom-left-radius: 
  22px; 
 
  border-right: 
  none; 
 
       } 
 
  .semic-text{ 
 
  margin-right: 
  20px 
 
       } 
 
  < 
  / 
  style 
  > 
 
  < 
  div 
  class= 
  "collection" 
  > 
 
  < 
  a 
  >< 
  span 
  class= 
  "semic-text" 
  >收藏 
  </ 
  span 
  ></ 
  a 
  > 
 
  </ 
  div 
  >

林夕_______

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css css编写三角形和半圆

三角的四个方向可修改，根据：border-top-color:; border-bottom-color:; border-left-color:; border-right-color:;&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta
复制链接

扫一扫