利用css的linear-gradient绘制图标。效果如图。
代码如下。
<!DOCTYPE html>标签：linear,gradient,渐变,50%,color,background,main,css,图标 From： https://blog.51cto.com/u_7266799/5890234
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变绘制图标</title>
<style type="text/css">
:root{
--main-color: orange;
}
*{
margin: 0;
padding: 0;
}
table{
margin: 50px;
border-collapse: collapse;
border: none;
}
tr{
border-bottom: 2px solid gray;
}
tr:first-child{
border-top: 2px solid gray;
}
td{
width: 100px;
height: 100px;
vertical-align: middle;
}
div{
width: 24px;
height: 24px;
margin: 0 auto;
background-repeat: no-repeat;
}
div.bg{
margin: 20px auto 0px;
background-color: var(--main-color);
border-radius: 50%;
}
/* 实心三角形-向右 */
.trangle.right{
background-image: linear-gradient(45deg, var(--main-color) 50%, transparent 50%),
linear-gradient(-45deg, transparent 50%, var(--main-color) 50%);
background-size: 12px 12px, 12px 12px;
background-position: 6px 0px, 6px 12px;
}
.trangle.right.bg{
background-image: linear-gradient(45deg, white 50%, transparent 50%),
linear-gradient(-45deg, transparent 50%, white 50%);
background-size: 8px 8px, 8px 8px;
background-position: 9px 4px, 9px 12px;
}
/* 实心三角形-向左 */
.trangle.left{
background-image: linear-gradient(-45deg, var(--main-color) 50%, transparent 50%),
linear-gradient(45deg, transparent 50%, var(--main-color) 50%);
background-size: 12px 12px, 12px 12px;
background-position: 6px 0px, 6px 12px;
}
.trangle.left.bg{
background-image: linear-gradient(-45deg, white 50%, transparent 50%),
linear-gradient(45deg, transparent 50%, white 50%);
background-size: 8px 8px, 8px 8px;
background-position: 6px 4px, 6px 12px;
}
/* 实心三角形-向上 */
.trangle.up{
background-image: linear-gradient(-45deg, var(--main-color) 50%, transparent 50%),
linear-gradient(45deg, var(--main-color) 50%, transparent 50%);
background-size: 12px 12px, 12px 12px;
background-position: 0px 6px, 12px 6px;
}
.trangle.up.bg{
background-image: linear-gradient(-45deg, white 50%, transparent 50%),
linear-gradient(45deg, white 50%, transparent 50%);
background-size: 8px 8px, 8px 8px;
background-position: 4px 6px, 12px 6px;
}
/* 实心三角形-向下 */
.trangle.down{
background-image: linear-gradient(45deg, transparent 50%, var(--main-color) 50%),
linear-gradient(-45deg, transparent 50%, var(--main-color) 50%);
background-size: 12px 12px, 12px 12px;
background-position: 0px 6px, 12px 6px;
}
.trangle.down.bg{
background-image: linear-gradient(45deg, transparent 50%, white 50%),
linear-gradient(-45deg, transparent 50%, white 50%);
background-size: 8px 8px, 8px 8px;
background-position: 4px 10px, 12px 10px;
}
/* 箭头头部-向右 */
.arrowhead.right{
background-image: linear-gradient(45deg, transparent 30%, var(--main-color) 30%, var(--main-color) 50%, transparent 50%),
linear-gradient(-45deg, transparent 50%, var(--main-color) 50%, var(--main-color) 70%, transparent 70%);
background-size: 12px 12px, 12px 12px;
background-position: 6px 0px, 6px 12px;
}
.arrowhead.right.bg{
background-image: linear-gradient(45deg, transparent 25%, white 25%, white 50%, transparent 50%),
linear-gradient(-45deg, transparent 50%, white 50%, white 75%, transparent 75%);
background-size: 8px 8px, 8px 8px;
background-position: 9px 4px, 9px 12px;
}
/* 箭头头部-向左 */
.arrowhead.left{
background-image: linear-gradient(-45deg, transparent 30%, var(--main-color) 30%, var(--main-color) 50%, transparent 50%),
linear-gradient(45deg, transparent 50%, var(--main-color) 50%, var(--main-color) 70%, transparent 70%);
background-size: 12px 12px, 12px 12px;
background-position: 6px 0px, 6px 12px;
}
.arrowhead.left.bg{
background-image: linear-gradient(-45deg, transparent 25%, white 25%, white 50%, transparent 50%),
linear-gradient(45deg, transparent 50%, white 50%, white 75%, transparent 75%);
background-size: 8px 8px, 8px 8px;
background-position: 6px 4px, 6px 12px;
}
/* 箭头头部-向上 */
.arrowhead.up{
background-image: linear-gradient(-45deg, transparent 30%, var(--main-color) 30%, var(--main-color) 50%, transparent 50%),
linear-gradient(45deg, transparent 30%, var(--main-color) 30%, var(--main-color) 50%, transparent 50%);
background-size: 12px 12px, 12px 12px;
background-position: 0px 6px, 12px 6px;
}
.arrowhead.up.bg{
background-image: linear-gradient(-45deg, transparent 25%, white 25%, white 50%, transparent 50%),
linear-gradient(45deg, transparent 25%, white 25%, white 50%, transparent 50%);
background-size: 8px 8px, 8px 8px;
background-position: 4px 6px, 12px 6px;
}
/* 箭头头部-向下 */
.arrowhead.down{
background-image: linear-gradient(45deg, transparent 50%, var(--main-color) 50%, var(--main-color) 70%, transparent 70%),
linear-gradient(-45deg, transparent 50%, var(--main-color) 50%, var(--main-color) 70%, transparent 70%);
background-size: 12px 12px, 12px 12px;
background-position: 0px 6px, 12px 6px;
}
.arrowhead.down.bg{
background-image: linear-gradient(45deg, transparent 0%, transparent 50%, white 50%, white 75%, transparent 75%),
linear-gradient(-45deg, transparent 0%, transparent 50%, white 50%, white 75%, transparent 75%);
background-size: 8px 8px, 8px 8px;
background-position: 4px 9px, 12px 9px;
}
/* 箭头-向右 */
.arrow.right{
background-image: linear-gradient(45deg, transparent 30%, var(--main-color) 30%, var(--main-color) 50%, transparent 50%),
linear-gradient(-45deg, transparent 50%, var(--main-color) 50%, var(--main-color) 70%, transparent 70%),
linear-gradient(0deg, var(--main-color), var(--main-color));
background-size: 12px 12px, 12px 12px, 20px 4px;
background-position: 12px 0px, 12px 12px, 0px 10px;
}
.arrow.right.bg{
background-image: linear-gradient(45deg, transparent 32%, white 32%, white 50%, transparent 50%),
linear-gradient(-45deg, transparent 50%, white 50%, white 68%, transparent 68%),
linear-gradient(0deg, white, white);
background-size: 8px 8px, 8px 8px, 16px 2px;
background-position: 13px 4px, 13px 12px, 3px 11px;
}
/* 箭头-向左 */
.arrow.left{
background-image: linear-gradient(-45deg, transparent 30%, var(--main-color) 30%, var(--main-color) 50%, transparent 50%),
linear-gradient(45deg, transparent 50%, var(--main-color) 50%, var(--main-color) 70%, transparent 70%),
linear-gradient(0deg, var(--main-color), var(--main-color));
background-size: 12px 12px, 12px 12px, 20px 4px;
background-position: 0px 0px, 0px 12px, 4px 10px;
}
.arrow.left.bg{
background-image: linear-gradient(-45deg, transparent 32%, white 32%, white 50%, transparent 50%),
linear-gradient(45deg, transparent 50%, white 50%, white 68%, transparent 68%),
linear-gradient(0deg, white, white);
background-size: 8px 8px, 8px 8px, 16px 2px;
background-position: 3px 4px, 3px 12px, 5px 11px;
}
/* 箭头-向上 */
.arrow.up{
background-image: linear-gradient(-45deg, transparent 30%, var(--main-color) 30%, var(--main-color) 50%, transparent 50%),
linear-gradient(45deg, transparent 30%, var(--main-color) 30%, var(--main-color) 50%, transparent 50%),
linear-gradient(0deg, var(--main-color), var(--main-color));
background-size: 12px 12px, 12px 12px, 4px 20px;
background-position: 0px 0px, 12px 0px, 10px 4px;
}
.arrow.up.bg{
background-image: linear-gradient(-45deg, transparent 32%, white 32%, white 50%, transparent 50%),
linear-gradient(45deg, transparent 32%, white 32%, white 50%, transparent 50%),
linear-gradient(0deg, white, white);
background-size: 8px 8px, 8px 8px, 2px 16px;
background-position: 4px 3px, 12px 3px, 11px 5px;
}
/* 箭头-向下 */
.arrow.down{
background-image: linear-gradient(45deg, transparent 50%, var(--main-color) 50%, var(--main-color) 70%, transparent 70%),
linear-gradient(-45deg, transparent 50%, var(--main-color) 50%, var(--main-color) 70%, transparent 70%),
linear-gradient(0deg, var(--main-color), var(--main-color));
background-size: 12px 12px, 12px 12px, 4px 20px;
background-position: 0px 12px, 12px 12px, 10px 0px;
}
.arrow.down.bg{
background-image: linear-gradient(45deg, transparent 50%, white 50%, white 65%, transparent 65%),
linear-gradient(-45deg, transparent 50%, white 50%, white 65%, transparent 65%),
linear-gradient(0deg, white, white);
background-size: 8px 8px, 8px 8px, 2px 16px;
background-position: 4px 13px, 12px 13px, 11px 3px;
}
/* 对号 */
.ok{
background-image: linear-gradient(45deg, transparent 50%, var(--main-color) 50%, var(--main-color) 80%, transparent 80%),
linear-gradient(-45deg, transparent 50%, var(--main-color) 50%, var(--main-color) 70%, transparent 70%);
background-size: 8px 8px, 12px 12px;
background-position: 2px 10px, 10px 6px;
}
.ok.bg{
background-image: linear-gradient(45deg, transparent 50%, white 50%, white 75%, transparent 75%),
linear-gradient(-45deg, transparent 50%, white 50%, white 65%, transparent 65%);
background-size: 6px 6px, 10px 10px;
background-position: 3px 11px, 9px 7px;
}
/* 错号 */
.error{
background-image: linear-gradient(45deg, transparent 41%, var(--main-color) 41%, var(--main-color) 59%, transparent 59%),
linear-gradient(-45deg, transparent 41%, var(--main-color) 41%, var(--main-color) 59%, transparent 59%);
background-size: 16px 16px, 16px 16px;
background-position: 4px 4px, 4px 4px;
}
.error.bg{
background-image: linear-gradient(45deg, transparent 42%, white 42%, white 58%, transparent 58%),
linear-gradient(-45deg, transparent 42%, white 42%, white 58%, transparent 58%);
background-size: 12px 12px, 12px 12px;
background-position: 6px 6px, 6px 6px;
}
/* 加号 */
.plus{
background-image: linear-gradient(0deg, var(--main-color), var(--main-color)),
linear-gradient(0deg, var(--main-color), var(--main-color));
background-size: 16px 4px, 4px 16px;
background-position: 4px 10px, 10px 4px;
}
.plus.bg{
background-image: linear-gradient(0deg, white, white),
linear-gradient(0deg, white, white);
background-size: 14px 2px, 2px 14px;
background-position: 5px 11px, 11px 5px;
}
/* 减号 */
.minus{
background-image: linear-gradient(0deg, var(--main-color), var(--main-color));
background-size: 16px 4px;
background-position: 4px 10px;
}
.minus.bg{
background-image: linear-gradient(0deg, white, white);
background-size: 14px 2px;
background-position: 5px 11px;
}
/* 设置，只有横线 */
.setting.line{
background-image: linear-gradient(0deg, var(--main-color), var(--main-color)),
linear-gradient(0deg, var(--main-color), var(--main-color)),
linear-gradient(0deg, var(--main-color), var(--main-color));
background-size: 24px 4px, 24px 4px, 24px 4px;
background-position: 0px 4px, 0px 10px, 0px 16px;
}
.setting.line.bg{
background-image: linear-gradient(0deg, white, white),
linear-gradient(0deg, white, white),
linear-gradient(0deg, white, white);
background-size: 12px 2px, 12px 2px, 12px 2px;
background-position: 6px 7px, 6px 11px, 6px 15px;
}
/* 设置，点和横线 */
.setting.dotLine{
background-image: linear-gradient(0deg, var(--main-color), var(--main-color)),
linear-gradient(0deg, var(--main-color), var(--main-color)),
linear-gradient(0deg, var(--main-color), var(--main-color)),
linear-gradient(0deg, var(--main-color), var(--main-color)),
linear-gradient(0deg, var(--main-color), var(--main-color)),
linear-gradient(0deg, var(--main-color), var(--main-color));
background-size: 4px 4px, 18px 4px, 4px 4px, 18px 4px, 4px 4px, 18px 4px;
background-position: 0px 4px, 6px 4px, 0px 10px, 6px 10px, 0px 16px, 6px 16px;
}
.setting.dotLine.bg{
background-image: linear-gradient(0deg, white, white),
linear-gradient(0deg, white, white),
linear-gradient(0deg, white, white),
linear-gradient(0deg, white, white),
linear-gradient(0deg, white, white),
linear-gradient(0deg, white, white);
background-size: 2px 2px, 12px 2px, 2px 2px, 12px 2px, 2px 2px, 12px 2px;
background-position: 4px 7px, 8px 7px, 4px 11px, 8px 11px, 4px 15px, 8px 15px;
}
/* 更多，横向 */
.more.horizontal{
background-image: linear-gradient(0deg, var(--main-color), var(--main-color)),
linear-gradient(0deg, var(--main-color), var(--main-color)),
linear-gradient(0deg, var(--main-color), var(--main-color));
background-size: 4px 4px, 4px 4px, 4px 4px;
background-position: 4px 10px, 10px 10px, 16px 10px;
}
.more.horizontal.bg{
background-image: linear-gradient(0deg, white, white),
linear-gradient(0deg, white, white),
linear-gradient(0deg, white, white);
background-size: 4px 4px, 4px 4px, 4px 4px;
background-position: 4px 10px, 10px 10px, 16px 10px;
}
/* 更多，纵向 */
.more.vertical{
background-image: linear-gradient(0deg, var(--main-color), var(--main-color)),
linear-gradient(0deg, var(--main-color), var(--main-color)),
linear-gradient(0deg, var(--main-color), var(--main-color));
background-size: 4px 4px, 4px 4px, 4px 4px;
background-position: 10px 4px, 10px 10px, 10px 16px;
}
.more.vertical.bg{
background-image: linear-gradient(0deg, white, white),
linear-gradient(0deg, white, white),
linear-gradient(0deg, white, white);
background-size: 4px 4px, 4px 4px, 4px 4px;
background-position: 10px 4px, 10px 10px, 10px 16px;
}
/* 警告 */
.warning{
background-image: linear-gradient(0deg, var(--main-color), var(--main-color)),
linear-gradient(0deg, var(--main-color), var(--main-color));
background-size: 4px 14px, 4px 4px;
background-position: 10px 2px, 10px 18px;
}
.warning.bg{
background-image: linear-gradient(0deg, white, white),
linear-gradient(0deg, white, white);
background-size: 4px 12px, 4px 4px;
background-position: 10px 3px, 10px 17px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<div class="trangle right"></div>
<div class="trangle right bg"></div>
</td>
<td>
<div class="trangle left"></div>
<div class="trangle left bg"></div>
</td>
<td>
<div class="trangle up"></div>
<div class="trangle up bg"></div>
</td>
<td>
<div class="trangle down"></div>
<div class="trangle down bg"></div>
</td>
</tr>
<tr>
<td>
<div class="arrowhead right"></div>
<div class="arrowhead right bg"></div>
</td>
<td>
<div class="arrowhead left"></div>
<div class="arrowhead left bg"></div>
</td>
<td>
<div class="arrowhead up"></div>
<div class="arrowhead up bg"></div>
</td>
<td>
<div class="arrowhead down"></div>
<div class="arrowhead down bg"></div>
</td>
</tr>
<tr>
<td>
<div class="arrow right"></div>
<div class="arrow right bg"></div>
</td>
<td>
<div class="arrow left"></div>
<div class="arrow left bg"></div>
</td>
<td>
<div class="arrow up"></div>
<div class="arrow up bg"></div>
</td>
<td>
<div class="arrow down"></div>
<div class="arrow down bg"></div>
</td>
</tr>
<tr>
<td>
<div class="ok"></div>
<div class="ok bg"></div>
</td>
<td>
<div class="error"></div>
<div class="error bg"></div>
</td>
<td>
<div class="plus"></div>
<div class="plus bg"></div>
</td>
<td>
<div class="minus"></div>
<div class="minus bg"></div>
</td>
</tr>
<tr>
<td>
<div class="setting line"></div>
<div class="setting line bg"></div>
</td>
<td>
<div class="setting dotLine"></div>
<div class="setting dotLine bg"></div>
</td>
<td>
<div class="more horizontal"></div>
<div class="more horizontal bg"></div>
</td>
<td>
<div class="more vertical"></div>
<div class="more vertical bg"></div>
</td>
</tr>
<tr>
<td>
<div class="warning"></div>
<div class="warning bg"></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>