CSS3绘制各种形状二

现在的CSS功能非常强大了,特别是CSS3的属性,例如转换属性过渡属性动画属性,能做的效果非常多。在网页开发中,会经常遇到一些小符号或者形状,在以前就只能通过切图来实现,切图这种方式是用起来方便,但是会增加请求。而现在浏览器对CSS3的兼容基本没有什么问题,所以在网页开发的时候遇到符号或者形状,能写的都是用CSS来书写了。
而这篇文章就是收集了各种通过CSS书写的形状,在开发的时候可以快速应用。例如:椭圆三角形梯形多边形五角星多角星,等等...

文章中涉及到的重要属性有:bordertransformgradient伪元素border-radius等,这些都是比较常用的属性,但是通过不同的组合,可以构建出不同的形状。

无限循环图标

  #infinity {
      position: relative;
      width: 212px;
      height: 100px;
      box-sizing: content-box;
    }
    #infinity:before,
    #infinity:after {
      content: "";
      box-sizing: content-box;
      position: absolute;
      top: 0;
      left: 0;
      width: 60px;
      height: 60px;
      border: 20px solid red;
      border-radius: 50px 50px 0 50px;
      transform: rotate(-45deg);
    }
    #infinity:after {
      left: auto;
      right: 0;
      border-radius: 50px 50px 50px 0;
      transform: rotate(45deg);
    }

<div id="infinity"></div>
无限循环图标

钻石盾牌

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

<div id="diamond-shield"></div>
钻石盾牌

菱形

    #diamond-narrow {
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-bottom: 70px solid red;
      position: relative;
      top: -50px;
    }
    #diamond-narrow:after {
      content: '';
      position: absolute;
      left: -50px;
      top: 70px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-top: 70px solid red;
    }

<div id="diamond-narrow"></div>
菱形

钻石

#cut-diamond {
      border-style: solid;
      border-color: transparent transparent red transparent;
      border-width: 0 25px 25px 25px;
      height: 0;
      width: 50px;
      box-sizing: content-box;
      position: relative;
      margin: 20px 0 50px 0;
    }
    #cut-diamond:after {
      content: "";
      position: absolute;
      top: 25px;
      left: -25px;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: red transparent transparent transparent;
      border-width: 70px 50px 0 50px;
    }

<div id="cut-diamond"></div>
钻石

鸡蛋

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

<div id="egg"></div>
鸡蛋

吃豆人

    #pacman {
      width: 0px;
      height: 0px;
      border-right: 60px solid transparent;
      border-top: 60px solid red;
      border-left: 60px solid red;
      border-bottom: 60px solid red;
      border-top-left-radius: 60px;
      border-top-right-radius: 60px;
      border-bottom-left-radius: 60px;
      border-bottom-right-radius: 60px;
    }

<div id="pacman"></div>
吃豆人

对话泡泡

    #talkbubble {
      width: 120px;
      height: 80px;
      background: red;
      position: relative;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
    }
    #talkbubble:before {
      content: "";
      position: absolute;
      right: 100%;
      top: 26px;
      width: 0;
      height: 0;
      border-top: 13px solid transparent;
      border-right: 26px solid red;
      border-bottom: 13px solid transparent;
    }

<div id="talkbubble"></div>
对话泡泡

阴阳图

    #yin-yang {
      width: 96px;
      box-sizing: content-box;
      height: 48px;
      background: #eee;
      border-color: red;
      border-style: solid;
      border-width: 2px 2px 50px 2px;
      border-radius: 100%;
      position: relative;
    }
    #yin-yang:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      background: #eee;
      border: 18px solid red;
      border-radius: 100%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
    }
    #yin-yang:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      background: red;
      border: 18px solid #eee;
      border-radius: 100%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
    }

<div id="yin-yang"></div>
阴阳图

徽章图

    #badge-ribbon {
      position: relative;
      background: red;
      height: 100px;
      width: 100px;
      border-radius: 50px;
    }
    #badge-ribbon:before,
    #badge-ribbon:after {
      content: '';
      position: absolute;
      border-bottom: 70px solid red;
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
      top: 70px;
      left: -10px;
      transform: rotate(-140deg);
    }
    #badge-ribbon:after {
      left: auto;
      right: -10px;
      transform: rotate(140deg);
    }

<div id="badge-ribbon"></div>
徽章图

放大镜

#magnifying-glass {
      width: 56px;
      box-sizing: content-box;
      height: 56px;
      border: 14px solid red;
      position: relative;
      border-radius: 49px;
    }
    #magnifying-glass:before {
      content: "";
      display: inline-block;
      position: absolute;
      right: -30px;
      bottom: -18px;
      border-width: 0;
      background: red;
      width: 35px;
      height: 12px;
      transform: rotate(45deg);
    }

<div id="magnifying-glass"></div>
放大镜

月亮

    #moon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-shadow: 15px 15px 0 0 red;
    }

<div id="moon"></div>
月亮

箭头标签

    #pointer {
      width: 200px;
      height: 40px;
      position: relative;
      background: red;
    }
    #pointer:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 20px solid white;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }
    #pointer:before {
      content: "";
      position: absolute;
      right: -20px;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 20px solid red;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }

<div id="pointer"></div>
箭头标签

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 7,877评论 0 8
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 2,018评论 1 14
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,080评论 0 11
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 22,979评论 1 45
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    圆圆和方方阅读 700评论 0 7