1, linear gradient implementation: striped background
<style type="text/css"> .horizontal-stripes{ width: 200px; height: 200px; margin-bottom: 20px; color: #fff; #f60 is 50%, from 0% to 50% is pure #f60; The gradient changes from # F60 (start color) at 50% to #333(end color) at 50% and the end color is also 50%, so there is no transition. */ background-image: linear-gradient(#f60 50%, #333 50%); background-size: 100% 20px; } .veritcal-stripes{ width: 200px; height: 200px; margin-bottom: 20px; color: #fff; background-image: linear-gradient(to right, #f60 50%, #333 50%); background-size: 20px 100%; } < / style > < body > < div class = "horizontal - stripes" > transverse stripe < / div > < div class = "veritcal - stripes" > vertical stripes < / div > < / body >2, linear gradient realization: the bottom of the receiving address oblique border
In fact, this frame is not perfect, the height will become high like this, there is a solution to know the master please give directions:
<style>
.box{
position: relative;
width: 50%;
height: 150px;
margin: 50px auto;
background-color: #eee;
}
.box::after{
position: absolute;
bottom: 0;
left: 0;
content: ' ';
width: 100%;
height: 4px;
background-image: repeating-linear-gradient(-45deg,
#ff6c6c 0, #ff6c6c 20%,
transparent 20%, transparent 25%,
#1989fa 25%, #1989fa 45%,
transparent 45%,transparent 50%);
background-size: 140px;
}
</style>
<body>
<div class="box"></div>
</body>
3, linear gradient realization: box corner cutting effect
<style> .box1{ display: inline-block; width: 200px; height: 150px; line-height: 150px; margin: 100px 30px; color: #fff; text-align: center; /* background-color: #ccc; */ background-image: linear-gradient(-45deg, transparent 15px, #ccc 0); } .box2{ display: inline-block; width: 200px; height: 150px; line-height: 150px; margin: 100px 30px; color: #fff; text-align: center; */ background-image: */ background-image: */ background-image: */ background-image: linear-gradient(45deg, transparent 15px, #ccc 0), linear-gradient(-45deg, transparent 15px, #ccc 0); /* background-size: 50%; background-size: 50%; */ background-position: left bottom, right bottom; /* background-repeat: no-repeat; background-repeat: no-repeat; } .box4{ display: inline-block; width: 200px; height: 150px; line-height: 150px; margin: 100px 30px; color: #fff; text-align: center; background-image: linear-gradient(135deg, transparent 15px, #ccc 0), linear-gradient(-135deg, transparent 15px, #ccc 0), linear-gradient(45deg, transparent 15px, #ccc 0), linear-gradient(-45deg, transparent 15px, #ccc 0); background-size: 50% 50%; background-position: left top, right top, left bottom, right bottom; background-repeat: no-repeat; } </div> <div class="box4"> </div> <div class="box4"> </div> body> </div> <div class="box4"> </div> body> </div4, linear gradient realization: cut triangle effect
<style> .inscribed-triangle{ display: inline-block; width: 200px; height: 150px; line-height: 150px; margin: 100px 30px; color: #fff; text-align: center; */ background-image: */ background-image: */ background-image: */ background-image: */ background-image: linear-gradient(-45deg, transparent 15px, #ccc 0), linear-gradient(45deg, transparent 15px, #ccc 0); background-size: 50%; */ background-position: 00, 100% 0; */ background-position: 00, 100% 0; background-repeat: no-repeat; } </style>5. Linear gradient: sawtooth effect at the bottom
<style> .Jagged{ display: inline-block; width: 200px; height: 150px; line-height: 150px; margin: 100px 30px; color: #fff; text-align: center; /* Set the width of the background to 20, and then set the width of the background to repeat. */ background-image: linear-gradient(-45deg, transparent 15px, #ccc 0), linear-gradient(45deg, transparent 15px, #ccc 0); background-size: 20px; } </div> <div style ="Jagged" style ="Jagged" style ="Jagged" style ="Jagged" style ="Jagged" style ="Jagged" style ="Jagged" style ="Jagged" style ="Jagged" style ="Jagged" style ="Jagged" style ="Jagged" style ="Jagged6. Radial gradient: circular corner cutting effect
<style> .radial-box1{ display: inline-block; width: 200px; height: 150px; line-height: 150px; margin: 100px 30px; color: #fff; text-align: center; background-image: radial-gradient(circle at right bottom, transparent 15px, #ccc 0); } .radial-box2{ display: inline-block; width: 200px; height: 150px; line-height: 150px; margin: 100px 30px; color: #fff; text-align: center; */ background-image: */ background-image: radial-gradient(circle at left bottom, transparent 15px, #ccc 0), radial-gradient(circle at right bottom, transparent 15px, #ccc 0); /* background-size: 50%; /* background-size: 50%; /* The position of the first background should be at 0, and the X-axis of the second background should be at 100%, because the width of the background has been set to 50%. */ background-position: 00, 100% 0; / background-position: 00, 100% 0; /* background-repeat: no-repeat; background-repeat: no-repeat; } .radial-box4{ display: inline-block; width: 200px; height: 150px; line-height: 150px; margin: 100px 30px; color: #fff; text-align: center; */ background-image: radial-gradient(circle at left top, transparent 15px, #ccc 0), radial-gradient(circle at right top, transparent 15px, #ccc 0), radial-gradient(circle at left bottom, transparent 15px, #ccc 0), radial-gradient(circle at right bottom, transparent 15px, #ccc 0); */ background-size: 50%; background-size: 50%; background-size: 50%; */ background-position: 00, 100% 0, 0 100%, 100% 100%; /* background-repeat: no-repeat; background-repeat: no-repeat; } </style> > <div class="radial "> <div class="radial "> </div> > <div class="radial "> </div Class ="radial box4"> </div> </body>7. Radial gradient realization: coupon effect
<style> .coupon{ display: inline-block; width: 200px; height: 150px; line-height: 150px; margin: 100px 30px; color: #fff; text-align: center; background: radial-gradient(circle at right top, transparent 15px, #f60 0) 0 0 / 40% 50%, radial-gradient(circle at right bottom, transparent 15px, #f60 0) 0 100% / 40% 50%, radial-gradient(circle at left top, transparent 15px, #ccc 0) 100% 0 / 60% 50%, radial-gradient(circle at left bottom, transparent 15px, #ccc 0) 100% 100% / 60% 50%; background-repeat: no-repeat; } </div> </div> </div> </div> </div> </div> </div> </div