纯css实现三角形、梯形、优惠券样式

三角形

首先我们先定义一个空盒子，然后将宽高设置为0，给每一个边border都设置一个颜色，现在他是这样的

现在看一下代码

 <div class="sanjiao"></div>

css：宽和高必须都是0

.sanjiao{
          width: 0;
          height: 0;
          border-top: 50px solid red;
          border-right: 50px solid black;  
          border-bottom: 50px solid blue;  
          border-left: 50px solid yellow;
}

看见这个图片想必就知道怎么实现了把，想要实现不同形状的三角，我们只需要改变4个方向的颜色，然后将border的颜色变为透明的就行，下面看一下代码和效果

<div class="box"></div>

css

.box{
          width: 0;
          height: 0;
          border: 50px solid transparent;
          //想要不同位置的只需要改变4个方向即可
          border-top-color: violet;
          margin-top: 30px;
}

或者这样

.triangle{  width: 0;  height: 0;  border: 16rpx solid #fff;  border-top: 16rpx solid transparent;  border-left: 16rpx solid transparent;  border-right: 16rpx solid transparent;}

梯形

来用这个三角实现一些特殊的形状，比如体形，先来看一下京东的首页部分模块

我们先来分析一下怎么实现，首先最外面的是一个长方形，然后我们只需要再实现一个直角三角形，将他定位再盒子的右侧即可，就像下图

首先先来实现一些高一点的直角三角形，这时候我们只需要将border-top设置的大一点，然后颜色改为透明色。bottom和left改为0即可，border-top千万不能设置为0，否则就没有高度了

<div class="sanjiao"></div>

css

.sanjiao{
          width: 0;
          height: 0;
          /* 只保留右边边框 */
          border-color: transparent red transparent transparent;
          /* 都是实线 */
          border-style: solid;
          /* 上边框大一点，右边稍小，其余为0 */
          border-width: 100px 50px 0 0;
}

实现京东效果的代码

<div class="price">
        <div class="first">
            ￥111
            <div class="sj"></div>
        </div>
        <div>￥222</div>
</div>

css

        .price{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 200px;
            height: 35px;
            line-height: 35px;
            border: 1px solid red;
            
        }
        .price div{
            text-align: center;
        }
        .first{
            width: 100px;
            height: 100%;
            background-color: red;
            position: relative;
            display: flex;
        }
        .sj{
            position: absolute;
            width: 0;
            height: 0;
            right: 0;
            /* 只保留右边边框 */
            border-color: transparent #fff transparent transparent;
            /* 都是实线 */
            border-style: solid;
            /* 上边框大一点，右边稍小，其余为0 */
            /* 这里设置35px是因为父元素的高就是35px */
            border-width: 35px 15px 0 0;
        }

优惠券

<div class="coupon"> <span>200</span>优惠券</div>

css

.coupon {  width: 300px;  height: 100px;  line-height: 100px;  margin: 50px auto;  text-align: center;  position: relative;  background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,  radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,  radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,  radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));}.coupon span {  display: inline-block;  vertical-align: middle;  margin-right: 10px;  color: red;  font-size: 50px;  font-weight: 400;}