纯 CSS 绘制图形（心形六边形等）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯 CSS 绘制图形（心形六边形等）相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        div
        {
            width: 50px;
            height: 50px;
            background-color: red;
            margin: 5px;
            text-align:center;
            line-height: 50px;
        }
         /* border-radius4个参数 左上 右上 右下 左下(顺时针) */
        .box{border-radius: 50%;}
        .semi-circle{border-radius: 100px 100px 0 0;height: 50px;}
        .sector{border-radius: 100% 0 0 0;}
        /* -webkit-transform旋转 */
        .arc
        {
            border-radius: 100px 0 100px 0;
            -webkit-transform: rotate(45deg);
        }
        .triangle
        {
            background: none;
            width: 0;
            height: 0;
            border: 50px solid red;
            border-color: red transparent transparent transparent;/* transparent透明 */
        }
        .rectangle::first-letter{ color: white;}
        .rectangle
        {
          border-radius: 10px;
          position: relative;
        }
        /*子绝父相(子级绝对定位(absolute)父亲相对定位relative)*/
        .rectangle::before
        {
            width: 0;
            height: 0;
            border: 15px solid red;
            border-color: transparent transparent transparent green;
            content: "";
            position: absolute;
            right: -30px;
            top: 14px;
        }
        .heart{
          width: 60px;
          height: 80px;
          background: none;
           position: relative;
        }
       /*  before、after伪元素 (属于行内元素设置宽度和高度无效解决办法 absolute变成块级元素) */
        .heart::before, .heart::after
        {
            width: 100%;
            height: 100%;
            content: "";
            background-color: red;
            position: absolute;
            border-radius: 100px 100px 0 0;
            -webkit-transform: rotate(-45deg);
        }
        .heart::after
        {
         -webkit-transform: rotate(45deg);
         left: 46px;
        }
        .one,.two,.there
        {
            margin: 0;
            visibility: hidden;
        }
        .one
        {
            width: 80px;
            height: 100px;
            margin: 10px;
            background-color: red;
            -webkit-transform: rotate(120deg);
        }
        .two
        {
            width: 100%;
            height: 100%;
            background-color:royalblue;
            -webkit-transform: rotate(-60deg);
        }
        .there
        {
            width: 100%;
            height: 100%;
            background-color: yellow;
            -webkit-transform: rotate(-60deg);
            visibility: visible;
            background: url(b.jpg);     
            background-size:contain;
        }
        .one,.two
        {
            overflow: hidden;
        }
    </style>
</head>
<body>
      <div>矩形</div>
      <div class="box">圆形</div>
      <div class="semi-circle">半圆</div>
      <div class="sector">扇形</div>
      <div class="arc">弧形</div>
      <div class="triangle">
      <p style="line-height: 15px;position: relative;top: -65px;left: -7px;">三角形</p>
      </div>
      <div class="rectangle">CSS3</div>
     <div class="heart"></div>
    <div class="one">
          <div class="two">
               <div class="there"></div>
          </div>
      </div>
     
</body>
</html>

运行结果技术分享

以上是关于纯 CSS 绘制图形（心形六边形等）的主要内容，如果未能解决你的问题，请参考以下文章

纯CSS绘制形状

纯CSS画的基本图形（矩形圆形三角形多边形爱心八卦等

好程序员web前端学习路线分享纯css绘制各种图形

史上最强大的40多个纯CSS绘制的图形

超多经典 canvas 实例，动态离子背景移动炫彩小球贪吃蛇坦克大战是男人就下100层心形文字等等等

纯CSS实现蜂窝六边形的个性相册