纯css实现三角形到八边形

谟渔
998 阅读3分钟

前言

三角形的实现问题在我们前端开发中是一种常见的需求,并且在一些大厂面试题当中,也经常问到一些这样的问题,所以这篇文章就来说一下这个问题,当然实现这些样式还是很多实现方式,这里就不多多介绍了

三角形

代码:

  div {
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }

    .div {
        width: 0;
        height: 0;
        border: 50px solid transparent;
        /* border-left-color: skyblue;
        border-right-color: yellow;
        border-top-color: red; */
        border-bottom-color: green;
    }
    
    
    <div>
      <div class="div">
    </div>
</div>

效果 :

image.png 说明 :

  1. 设置块级盒子宽高为0px
  2. 给边框设置 transparent
  3. 利用left right top bottom 设置三角形的方向

气泡框

代码:

    .father {
                position: relative;
                background-color: skyblue;
                width: 200px;
                height: 100px;
                border-radius: 10%;
            }

    .father::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-top-color: skyblue;
        top: 100%;
        left: 50%;
    }

效果 :

image.png 说明:

  1. 子绝父相定位
  2. 双伪元素设置三角形

镂空三角形

代码 :

.father {
            position: relative;
            border: 20px solid transparent;
            width: 0;
            height: 0;
            border-top-color: skyblue;
        }

    .father::before {
        content: '';
        position: absolute;
        border: 20px solid transparent;
        width: 0;
        height: 0;
        top: -25px;
        left: -20px;
        border-top-color: #fff;
    }
    
    <div class="father"></div>

效果:

image.png 说明: 利用三角绘制箭头，只需要再绘制一个和此三角大小相同，方向相同的三角，颜色和背景颜色一样，覆盖在此三角上面，通过少量的位移形成箭头

五角星

代码 :

.box {
            margin: 0 auto;
            width: 100px;
            height: 100px;
            padding-top: 10px;
        }

    .div {
        position: relative;
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-top: 15px solid red;
    }

    .div::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-top: 15px solid red;
        top: -23px;
        left: -10px;
        transform: rotate(286deg);
    }

    .div::before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-top: 15px solid red;
        top: -22px;
        left: -31px;
        transform: rotate(70deg);
    }
    
     <div class="box">
        <div class="div"></div>
     </div>

效果 :

image.png 说明:

  1. 定位 子绝父相
  2. 旋转 transform : rotate

六角形

代码 :

.box {
            margin: 0 auto;
            width: 100px;
            height: 100px;
            padding-top: 10px;
        }

    .div {
        position: relative;
    }

    .div::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border: 30px solid transparent;
        border-bottom: 52px solid transparent;
        border-top: 52px solid skyblue;
        top: -67px;
        transform: rotate(180deg);
    }

    .div::before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border: 30px solid transparent;
        border-bottom: 52px solid transparent;
        border-top: 52px solid skyblue;
    }
    
     <div class="box">
       <div class="div"></div>
     </div>

效果:

image.png

梯形

梯形也是基于 border 来绘制的，只不过绘制梯形时，宽高和border尺寸相同。把任意三边颜色设置为 transparent即可得到某一朝向的梯形。

代码 :

    .box {
                width: 200px;
                height: 200px;
                background-color: skyblue;
                border: 100px solid transparent;
                border-right-color: red;
                border-left-color: green;
                border-top-color: purple;
                border-bottom-color: yellow;
            }
            
             <div class="box">

             </div>

效果:

image.png 代码 :

  .box {
        width: 200px;
        height: 200px;
        /* background-color: skyblue; */
        border: 100px solid transparent;
        /* border-right-color: red;
        border-left-color: green;
        border-top-color: purple; */
        border-bottom-color: yellow;
    }

效果 :

image.png

六边形

代码 :

 div {
            width: 500px;
            height: 500px;
            margin: auto;
            margin-top: 300px;
        }

    .box {
        width: 100px;
        height: 100px;
        border: 50px solid;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-top-color: skyblue;
        position: relative;
    }

    .box::after {
        content: '';
        width: 100px;
        height: 100px;
        border: 50px solid;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: skyblue;
        border-top-color: transparent;
        position: absolute;
        left: -50%;
        top: -250%;
    }
    
<div>
    <div class="box">

    </div>
</div>

效果:

image.png

八边形

代码 :

     div {
                width: 500px;
                height: 500px;
                margin: auto;
                margin-top: 300px;
            }

    .box {
        width: 200px;
        height: 100px;
        background: skyblue;
        position: relative;
    }

    .box::before {
        content: '';
        width: 100px;
        height: 100px;
        border: 50px solid;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: skyblue;
        border-top-color: transparent;
        position: absolute;
        top: 100%;
        transform: rotate(180deg);
    }

    .box::after {
        content: '';
        width: 100px;
        height: 100px;
        border: 50px solid;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: skyblue;
        border-top-color: transparent;
        position: absolute;
        top: -200%;
    }

效果:

image.png

avatar
文章
阅读
粉丝