5个超级实用的CSS基本图形

2017/07/18 11:11
阅读数 5

作者:神码大姐

编辑:魔卡

原文地址:【神码大姐】公众号

━━━━━

1 border 实现三角形

这应该是项目中应用非常广泛的一个基本图形,我们来看两个例子:

1)下拉框


2) 弹出提示框

而三角形的实现原理并不复杂,就是利用border属性。当一个块元素大小为零,只有四个边的时候,可以显示成如下模样

同理,将三条边设为透明,可以完成一个小三角形,代码如下:

.test-border { 
   width: 0;
   height: 0;
   border-bottom: 50px solid #00a000;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
}

2 border-radius+transform实现水滴

怎么样,有没有觉得似曾相识?是的,水滴用于地图中的位置信息图标。然而,其实现也只不过短短两行key代码。


.droplet {

   width: 100px;

   height: 100px;

   background-color: lightblue;

   border-radius: 50% 50% 0;

   transform: rotate(45deg);

}


3 after实现加号

普遍用作“新增”按钮的图标,可以结合after元素叠加实现

#cross {

  background: red;

  height: 100px;

  position: relative;

  width: 20px;

}

#cross:after {

  background: red;

  content: "";

  height: 20px;

  left: -40px;

  position: absolute;

  top: 40px;

  width: 100px;

}


4 before+after实现太极八卦

看下面分解图教你用before+after实现这个组合形状。


.taiji-icon{

  width: 96px;

  height: 48px;

  margin: 20px 20px;

  float: left;

  background-color: #ffffff;

  border-color: #000000;

  border-style: solid;

  border-width: 2px 2px 50px 2px;

  border-radius: 100%;

  position: relative;

 }

 .taiji-icon:before {

  width: 12px;

  height: 12px;

  top: 50%;

  left: 0;

  content: "";

  position: absolute;

  background-color: #ffffff;

  border: 18px solid #000000;

  border-radius: 100%;

 }

 .taiji-icon:after {

  width: 12px;

  height: 12px;

  top: 50%;

  left: 50%;

  background-color: #000000;

  border: 18px solid #ffffff;

  border-radius:100%;

  content: "";

  position: absolute;

 }


5 stroke-dasharray实现淘宝loading图标

先建立一个SVG,内联两个circle一个用于画小圆环,一个画个圆弧,二者重叠。

<svg  viewBox="0 0 50 50">

       <circle cx="25" cy="25" r="20" fill="none" class="item"/>

       <circle cx="25" cy="25" r="20" fill="none" class="item"/>

   </svg>


接下来,用stroke-dasharray来实现旋转的小圆弧,这里介绍一下stroke-dasharray设置两个参数时,第一个参数指线段长度,第二个参数指间隔。

div {

    width:200px;

    height:200px;

    border-radius: 20px;

    background-color:black;


    }

.item:nth-child(2) {

    stroke:rgb(24,120,222);

    stroke-width:2px;

    stroke-dasharray: 10,300;

    stroke-linecap:round;

}


.item:nth-child(1) {

    stroke:#ccc;

    stroke-width:2px;

    stroke-linecap:round;

}


svg {

    animation: loading 1.4s linear infinite;

}


@keyframes loading {

    0% {

        transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg);

    }


    100% {

          transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);

    }

}


进而loading动画完成

是不是很简单又很有趣呢!


【玩转H5下拉上滑动效[前端进阶]

 程序员,如何提升自身价值!

 实现一个高度自适应的输入框]

 破解前端面试[80% 应聘者不及格系列]=>从闭包说起

 程序员,如何提升自身价值!

 阿里巴巴集团·前端工程师:黄玄,如何客观的评价[小程序]的体验



本文分享自微信公众号 - 前端人(FrontendPeople)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部