css 画半圆-CSS如何绘制小三角形/六边形等各种小图标

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在剪切图片时，常常需要一些小图标来辅助信息模块的表达，比如小三角选中状态的导航栏、气泡框等等。 如果那些小图标以图片的形式加载，就会减少HTTP请求量，不利于性能优化。 因此，我们可以使用CSS、HTML5Canvas、SVG、基于base64的图片编码等方法来实现图标的轮廓。

下面主要介绍几种常用的绘制小三角形等图形的CSS方法：

小三角形的轮廓使用border属性勾勒出小三角形的轮廓

原理：在将原始div的宽度和高度逐渐减小为0的过程中，各个方向的边框形状会逐渐从矩形变为三角形。 设置每个方向框架的颜色和长度。 如果只想显示某个三角形，其他边框颜色可以设置为透明css 画半圆，即透明。

- 边框转为三角形的几种情况如下：

    <div class="triangle4"></div> 
    
    <div class="triangle2"></div>
    
    <div class="triangle3"></div>
    

.triangle4
{ width: 0;height: 0;border: 40px;border-style: solid;border-color: #f00 #ff0 #00f #008000;}
.triangle2
{ width: 0;height: 0;border-width: 0 0 40px 40px;border-style: solid;border-color: #f00 #ff0 #00f #008000;}
.triangle3
{ width: 0;height: 0;border-width: 0 40px 40px 40px;border-style: solid;border-color: #f00 #ff0 #00f #008000;}

如上图，分别指定4、3、2方向的border-width长度，其他方向的长度设置为0css 画半圆，则分别得到一个包含4个三角形的正圆（周长为2*border-宽度）; 一个包含3个三角形（一边为border-width，另一边为2*border-width）的圆，长度设置为0的边框对应边框的方向会产生一个更大的三角形，厚度加倍; 包含两个 2 A 三角形完美圆（圆周边界宽度）。

结果图如下所示：

- 得到的不同方向的小三角形如下：

    <div class="triangle_up"></div>  
    <div class="triangle_down"></div> 
    <div class="triangle_left"></div>  
    <div class="triangle_right"></div> 

.triangle_up{border-color: transparent transparent #00f transparent;}
.triangle_down{border-color: #f00 transparent transparent transparent;}
.triangle_left{border-color: transparent #ff0 transparent transparent;}
.triangle_right{border-color: transparent transparent transparent #008000;}

css中未列出的其他属性与上面的div属性相同，只需修改border-color属性即可。 如果你想得到那个方向的小三角形，就保持那个方向的border-color，其他方向的border-color设置为透明。

css 旋转完美圆

将一个小正圆在大正圆上方旋转45度，背景颜色相同，沿对角线中间突出一个三角形。 IE9以前不支持旋转。

这个方法不是很简洁，不做过多的介绍。

Base64编码

通过base64对现有图片进行编码，可以有效减少http请求，但是这种方法不太实用，所以这次就不过多介绍了。

HTML5画布

在画布上，使用画布上标记的三个点的坐标绘制一个小三角形。

<canvas id="canTriangle" height="100" width="100">Triangle</canvas>

草绘的js代码如下：

var canvas = document.getElementById('canTriangle');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(50, 100);
context.closePath();
context.fillStyle = "rgb(78, 193, 243)";
context.fill();

SVG方法

使用内联SVG勾勒出填充三角形，实现方法如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
 <polygon points="0,0 50,0 25,50"/>
</svg>

.svg-triangle
{
    width: 50px;
    height: 50px;
    margin: 20px auto;
}
.svg-triangle polygon
{
    fill: #98d02e;
    stroke: #65b81d;
    stroke-width: 2;
}

综上所述，第一种边框方式比较简单，也常用。 前两种方法比较新颖，功能强大，有待进一步研究。

其他形状的轮廓矩形/半圆形/圆弧

    <div class="circle">圆形</div> 
    <div class="semi-circle">半圆</div>  
    <div class="arc">弧形</div>

.circle
{
    line-height: 50px;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50%;
    background-color: red;
}
.semi-circle
{
    width: 50px;
    height: 25px;
    border-radius: 25px 25px 0 0;
    background-color: red;
}
.arc
{
    width: 50px;
    height: 50px;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    border-radius: 50px 0;
    background-color: red;
}

得到的几张图如图所示：

曲线绘制主要是基于完美的圆形（圆形）边框，通过设置border-radius属性来设置方形边框4个方向的圆角值：

- 正方形就是将4个圆角值设置为长度的一半，即圆的直径；

-半正方形会将高度减半，前面两个圆角值是长度的一半，下面两个圆角值设置为0；

- 圆弧保留对角线方向两个圆角的长度值，另一个对角线的圆角值设置为0，在此基础上旋转45度，得到图中效果。 旋转功能不兼容低版本IE浏览器。

导航栏菜单中小三角下标的实现

菜单栏中的每一项都使用相对定位relative，下面对应的小三角形使用伪类：after+absolute定位absolute来实现，具体实现方法如下：

<div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="#">Home</a>
          <a class="blog-nav-item" href="#">New features</a>
          <a class="blog-nav-item" href="#">Press</a>
          <a class="blog-nav-item" href="#">New hires</a>
          <a class="blog-nav-item" href="#">About</a>
        </nav>
      </div>
    </div>

.blog-masthead { background-color: #428bca;}
.blog-nav-item {
  position: relative;
  display: inline-block;
  padding: 20px;
  font-weight: 500;
  color: #cdddeb;
}
/* Active state gets a caret at the bottom */
//使用伪类添加三角形
.blog-nav .active:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  vertical-align: middle;
  content: " ";
  border-right: 5px solid transparent;
  border-bottom: 5px solid;
  border-left: 5px solid transparent;
}

生成的导航图像如下所示：

如果还有其他绘制小图形的方法，稍后我们会分享~

参考：