Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

CSS 图形

发布于:  

整理一些用CSS 制作的图形, 方便以后使用 。

注意: 以下所有图形用法都是使用一个元素。 如: <div id="moon"></div>

Rectangle(矩形)

#rectangle {
    width: 200px;
    height: 100px;
    background: #69B29F;
}

Circle(圆形)

#circle  {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #69B29F;
}

Oval(椭圆形)

#oval  {
    width: 200px;
    height: 100px;
    border-radius: 100px / 50px;
    background: #69B29F;
}

Triangle Up(向上的三角形)

#triangle-up  {
    width: 0;
    height: 0;  
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #69B29F;
}

Triangle Down(向下)

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #69B29F;
}

Triangle Left(向左)

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid #69B29F;
    border-bottom: 50px solid transparent;
}

Triangle Right(向右)

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid #69B29F;
    border-bottom: 50px solid transparent;
}

Triangle Top Left(左上)

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid #69B29F;
    border-right: 100px solid transparent;
}

Triangle Top Right(右上)

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid #69B29F;
    border-left: 100px solid transparent;
}

Triangle Bottom Left(左下)

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid #69B29F;
    border-right: 100px solid transparent;
}

Triangle Bottom Rgiht(右下)

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid #69B29F;
    border-left: 100px solid transparent;
}

Curved Tail Arrow(弯尾箭头)

#curvedarrow  {
    position: relative;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-right: 20px solid #69B29F;
    transform: rotate(180deg) /* 调整这个值 得到不同的方向 */
}

#curvedarrow:after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-top: 6px solid #69b29f;
  border-radius: 30px 0 0 0;
  top: -24px;
  left: -16px;
  transform: rotate(45deg)
}

Trapezoid(梯形)

#trapezoid {
    border-bottom: 100px solid #69B29F;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

Parallelogram(平行四边形)

#parallelogram  {
    height: 50px;
    width: 100px;
    background-color: #69B29F;
  
    transform: skew(20deg)
}

Star (6-points)(六角星)

#star-six  {
  height: 0;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #69B29F ;
  position: relative
}

#star-six:after {
  content: '';
  position: absolute;
  width: 0;
  height 0;
  border-top: 100px solid #69b29f;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  left: -50px;
  top: 30px;
}

Star (5-points)(五角星)

#star-five  {
  margin: 50px 0;
  height: 0;
  width: 0;
  
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #FD0100;
  position: relative;
  transform: rotate(35deg)
}

#star-five:before {
  content: '';
  position: absolute;
  width: 0;
  height 0;
  
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 80px solid #FD0100;
  
  left: -65px;
  top: -45px;
  transform: rotate(-35deg)
}

#star-five:after {
  content: '';
  position: absolute;
  width: 0;
  height 0;
  
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #FD0100;
  
  left: -105px;
  top: 3px;
  transform: rotate(-70deg)
}

Pentagon(五边形)

#pentagon   {
  
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: #69B29F transparent;  
  width: 54px;
  position: relative;
}

#pentagon:after {
  content: '';
  height: 0;
  width: 0;
  
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-bottom: 35px solid #69B29F;
  position: absolute;
  top: -85px;
  left: -18px;
}

Hexagon(六边形)

#hexagon {
  height: 50px;
  
  background-color: #69B29F ;  
  width: 80px;
  position: relative;
}

#hexagon:after {
  content: '';
  height: 0;
  width: 0;
  
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 25px solid #69B29F;
  position: absolute;
  top: -25px;
  left: 0;
}

#hexagon:before {
  content: '';
  height: 0;
  width: 0;
  
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 25px solid #69B29F;
  position: absolute;
  top: 50px;
  left: 0;
}

Octagon(八边形)

#octagon {
  height: 40px;
  
  background-color: #69B29F ;  
  width: 80px;
  position: relative;
}

#octagon:after {
  content: '';
  height: 0;
  width: 40px;
  
  border-bottom: 20px solid #69B29F;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  
  position: absolute;
  top: -20px;
  left: 0;
}

#octagon:before {
  content: '';
  height: 0;   
  width: 40px;
  
  border-top: 20px solid #69B29F;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  position: absolute;
  top: 40px;
  left: 0;
}

Heart(心形)

#heart {
  height: 90px;   
  width: 100px;
  position: relative;
}

#heart:before, #heart:after {
  content: '';
  height: 80px;
  width: 50px;
  
  border-radius: 50px 50px 0 0;
  background-color: red;
  
  
  position: absolute;
  top: 0;
  left: 50px;
  transform-origin: 0 100%;
  transform: rotate(-45deg)
}

#heart:after {  
  left: 0;
  transform-origin: 100% 100%;
  transform: rotate(45deg)
}

Diamond Shield

#diamond-shield {
  height: 0;   
  width: 0;
  border: 50px solid transparent;
  border-bottom: #093576 solid 20px;
  position: relative;
}

#diamond-shield:after {  
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  border: 50px solid transparent;
  border-top: 70px solid #093576;
  left: -50px;
  top: 20px;
}

Cut Diamond(砖石形)

#cut-diamond {
  height: 0;   
  width: 50px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: #36527A solid 20px;
  position: relative;
}

#cut-diamond:after {  
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  border: 50px solid transparent;
  border-top: 70px solid #36527A;
  left: -25px;
  top: 20px;
}

Egg(鸡蛋)

#egg {
  height: 180px;   
  width: 126px;  
  background-color: #EBC0A0;  
  border-radius: 50% 50% / 60% 60% 40% 40%;
}

Talk Bubble

#talkbubble  {
  height: 60px;   
  width: 120px;  
  background-color: #69B29F;  
  border-radius: 10px;
  position: relative;
}

#talkbubble:before {
  content: '';
  position: absolute;
  left: -20px;
  top: 28%;
  width: 0; height: 0;
  border-top: 10px solid transparent;
  border-right: 20px solid #69B29F;
  border-bottom: 10px solid transparent;
}

Badge Ribbon(徽章丝带)

#badge-ribbon  {
  height: 100px;   
  width: 100px;  
  background-color: #F46930;  
  border-radius: 50%;
  position: relative;
}

#badge-ribbon:before, #badge-ribbon:after {
  content: '';
  position: absolute;
  left: -10px;
  top: 70px;
  width: 0; height: 0;
   border-bottom: 70px solid #F46930;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  transform: rotate(-140deg)
}

#badge-ribbon:after {
  left: auto;
  right: -10px;
  transform: rotate(140deg)
}

Moon(月亮)

#moon {
  width: 100px;
  height: 100px;  
  border-radius: 50px;
  box-shadow: 15px 15px 0 0 #F9B95B
}

结束

以上内容要感谢作者 YuanWing 参考他的文章

另外还有一个很好的icono项目,是纯css 实现的各种icon 图形 .

cssicon

厚颜一下 ~^_^~

赏赐