CSS写一个缺角的div和菱形

本文转载自查看原文 2021-03-30 10:15 273

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 900px;
height: 50px;
background: linear-gradient(-145deg, transparent 11px, #0b2b5f 0) right, linear-gradient(145deg, transparent 11px, #0b2b5f 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box"></div>
</body>

</html>

同理一个菱形是

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 900px;
height: 50px;
background：linear-gradient( -47deg, transparent 34px, #0b2b5f 0) right, linear-gradient( 137deg, transparent 34px, #0b2b5f 0) left;

background-size: 50% 100%; background-repeat: no-repeat; } </style>
</head>
<body>
<div class="box"></div>
</body>

</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css实现缺角的几种方法 CSS3实现缺角矩形，缺角边框以及折角矩形纯CSS一个div实现无缝隙尖角框 Java 写三角形空心三角形菱形空心菱形练习 C#写一个菱形用css3写一个可以无限旋转的div或者图片 css实现div左侧突出一个带边框的三角形 css-div 四角边框 div去掉一个角变一个5边型 CSS为DIV添加尖角指向