triangle

First we define an empty box, then set the width and height to 0, give each border a color, now it looks like this

Now look at the code

 <div class="sanjiao"></div>
Copy the code

CSS: The width and height must be 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;
}
Copy the code

To create a triangle with different shapes, we just need to change the color of the four directions, and then make the color of the border transparent. Let’s see the code and the effect

<div class="box"></div>
Copy the code

css

.box{ width: 0; height: 0; border: 50px solid transparent; Border-top-color: violet; border-top-color: violet; border-top-color: violet; margin-top: 30px; }Copy the code

Or it

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

trapezoidal

To use this triangle to achieve some special shapes, such as body shape, first look at the home page of JINGdong part of the module

Let’s analyze how to implement it first. First, the outer rectangle is a rectangle, and then we just need to implement a right triangle, and place it on the right side of the box, as shown in the picture below

First, to implement some higher right triangles, we just need to make the border-top bigger and change the color to transparent. Border-top: 0; border-top: 0; border-top: 0; border-top: 0; border-top: 0

<div class="sanjiao"></div>
Copy the code

css

.sanjiao{ width: 0; height: 0; */ border-color: transparent red transparent transparent; Border-style: solid; border-style: solid; /* border-width: 100px 50px 00; }Copy the code

Achieve jingdong effect code

<div class="price"> <div class="first"> ￥111 <div class="sj"></div> </div>Copy the code

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-bottom: transparent # transparent; Border-style: solid; border-style: solid; Border-width: 35px 15px 0; border-width: 35px 15px 0; }Copy the code

coupons

<div class="coupon"> <span>200</span>Copy the code

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; }Copy the code