css 实现各种多边形图案

100人浏览 2024-09-28 11:33:41

使用css的border边框属性和宽度高度可以实现各种形状的图形，如下：

梯形

html:

<div class="trapezoid"></div>

css:

/*梯形*/
.trapezoid {
    width: 80px; height: 0;
    border: 40px solid #fff;
    border-top: 0 solid;
    border-bottom: 80px solid #b4a078;
  }

五角星

五星

html:

<div class="star-5-points"></div>

css:

.star-5-points {
    width: 0; height: 0;
    position: relative;
    margin: 50px 0;
    border: 80px solid rgba(0,0,0,0);
    border-top: 0 solid;
    border-bottom: 56px solid red;
    transform: rotateZ(35deg);
  }
  .star-5-points::before {
    content: "";
    width: 0; 
    height: 0;
    position: absolute;
    top: -36px; 
    left: -52px;
    border: 24px solid rgba(0,0,0,0);
    border-top: 0 solid;
    border-bottom: 64px solid red;
    transform: rotateZ(-35deg);
  }
  .star-5-points::after {
    content: "";
    width: 0; 
    height: 0;
    position: absolute;
    top: 3px; 
    left: -86px;
    border: 80px solid rgba(0,0,0,0);
    border-top: 0 solid;
    border-bottom: 56px solid red;
    transform: rotateZ(-70deg);
  }

带子形状

html:

<div class="ribbon"></div>

css:

.ribbon {
    width: 0; 
    height: 80px;
    border: 40px solid #56ad66;
    border-top: 0 solid;
    border-bottom: 28px solid rgba(0,0,0,0);
  }

钻石形状

钻石

这个图形由2部分组成，当上部图形的背景色比下部背景色浅时就会有点立体效果，如下图。

html：

<div class="masonry"></div>

css：

/*上部图形背景色*/
.masonry {
    width: 50px; height: 0;
    position: relative;
    margin: 20px 0 82px;
    border: 25px solid rgba(0,0,0,0);
    border-top-width: 0;
    border-bottom-color: #b4a078;
  }
/*下部图形背景色*/
  .masonry::after {
    content: "";
    width: 0; height: 0;
    position: absolute;
    top: 25px; left: -25px;
    border: 50px solid rgba(0,0,0,0);
    border-top: 70px solid #b4a078;
    border-bottom-width: 0;
  }

心形

html:

<div class="heart"></div>

css:

.heart {
    content: "";
    display: block;
    width: 100px;
    min-height: 80px;
    position: relative;
    transform-origin: 50% 50% 0;
  }
/*左边形状*/
 .heart:before {
    content: "";
    display: block;
    width: 50px; height: 80px;
    position: absolute;
    top: 0; left: 50px;
    border-radius: 50px 50px 0 0;
    background: #ff66ff;
    transform: rotateZ(-45deg);
    transform-origin: 0 100% 0;
  }
/*右边形状*/
  .heart:after {
    content: "";
    display: block;
    width: 50px; height: 80px;
    position: absolute;
    top: 0; left: 0;
    border-radius: 50px 50px 0 0;
    background: #ff66ff;
    transform: rotateZ(45deg);
    transform-origin: 100% 100% 0;
  }