相信很多人都想知道如何写一个带边框的三角形,用在各种带三角形的边框上,
这是我自己写的一个带边框的三角形
以下时代码,各位可以自己借鉴。
<style>
body{
background-color: bisque;
}
.box1{
width: 500px;
height: 200px;
border: 1px solid black;
margin: 100px auto;
background-color: #fff;
position: relative;
}
.box1::before{
width: 0;
height: 0;
content: "";
border-width: 10px;
border-color: transparent transparent #fff transparent;
border-style: dashed dashed solid dashed;
position: absolute;
top: -20px;
right: 10px;
z-index: 100;
}
.box1::after{
width: 0;
height: 0;
content: "";
border-width: 11px;
border-color: transparent transparent black transparent;
border-style: dashed dashed solid dashed;
position: absolute;
top: -22px;
right: 9px;
z-index: 99;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>