…">

CSS 实现对号效果

www.jswusn.com CSS 2018-12-28 18:33:36 4006次浏览

  实现对号效果,一种思路是利用现成的符号,直接在网上搜索到 √,插入页面。另一种思路是本文要介绍的用 CSS 实现,思路是:

  · 给块级元素设置宽度和高度

  · 设置元素相邻的两个 border

  · 旋转元素


HTML

<div class="check-style-unequal-width"></div>

  解析

  · 此处需要使用块级元素

  · 不需要设置元素内容


CSS

.check-style-unequal-width {
    width: 8px;
    height: 16px;
    border-color: #009933;
    border-style: solid;
    border-width: 0 3px 5px 0;
    transform: rotate(45deg);
}

  解析

  · 设置宽度和高度,得出一个矩形效果,并且矩形中没有内容

  · 设置相邻border的样式,得到对号的大体轮廓

  · 使用旋转属性,成功得到对号


运行效果

1545993090978929.png

  解析

  如上图,第一个为两条线等宽的对号效果,第二个为两条线不等宽的对号效果;第三个为两条线等宽等长的对号效果。

  注意事项

  行级元素直接设置宽度和高度没有用,需要设置其display使其变为块级元素。例如:span需要设置display为inline-block才能适用于本例效果

  可以根据实际需求调整元素宽度和高度

  可以根据实际需求设置不同的border,以及相邻border的宽度

  可以对此效果做简单的修改,作用于伪元素::before和::after。


技术分享

苏南名片

  • 电话:152-1887-1916
  • 邮箱:message@jswusn.com
  • 地址:江苏省苏州市相城区

热门文章

Copyright © 2018-2024 jswusn.com 版权所有

技术支持:苏州网站建设  苏ICP备18036849号