关闭按钮绘制

关闭按钮可以用Photoshop画&＃xff0c;然后存为图片。但在这里&＃xff0c;尝试用CSS来绘制这个形状&＃xff0c;它的优点在于效果美观&＃xff0c;便于定制和修改&＃xff0c;且具有矢量缩放能力。
先定义一个容器&＃xff1a;

<span class&＃61;"close">Close Mespan>


然后&＃xff0c;设置两个伪元素&＃xff0c;每个伪元素都是一条线&＃xff0c;为了区分&＃xff0c;加上白色和红色。

body{background: #2ecc71; }.close{font-size: 0px;display: block;}.close::before, .close::after{content: &＃39;&＃39;;width: 50px;height: 2px;background: #ffffff;display: block;}.close::after{background: #f00;}


接着&＃xff0c;要形成“X”的效果&＃xff0c;我们旋转两根线条&＃xff1a;

.close::after{transform: rotate(-45deg);}.close::before{transform: rotate(45deg);}


旋转后发现&＃xff0c;白色线条向上偏移了一点&＃xff0c;原因是&＃xff0c;before和after两个元素在y方向上有2像素的偏差。只需要用translateY(-2px) 将红色线条向上移动两个像素就行了&＃xff1a;

.close::after{transform: rotate(-45deg) translateY(-2px);}


最后再去掉颜色&＃xff1a;