Icon shows the red part. Choose how to write the effect in css
Icon shows the red part. Choose how to write the effect in css
each of the four corners is located in a transparent square, each with two sides
<style>
.item{
height: 50px;
width: 250px;
background: -sharpccc;
position: relative;
}
.item-horn{
position: absolute;
width: 20px;
height: 20px;
}
.item-left-top{
top: 0;
left: 0;
border-top: 2px solid red;
border-left: 2px solid red;
}
.item-right-top{
top: 0;
right: 0;
border-top: 2px solid red;
border-right: 2px solid red;
}
.item-left-bottom{
bottom: 0;
left: 0;
border-bottom: 2px solid red;
border-left: 2px solid red;
}
.item-right-bottom{
bottom: 0;
right: 0;
border-bottom: 2px solid red;
border-right: 2px solid red;
}
</style>
<div class="item">
<div class="item-horn item-left-top"></div>
<div class="item-horn item-right-top"></div>
<div class="item-horn item-left-bottom"></div>
<div class="item-horn item-right-bottom"></div>
</div>
Previous: Menu picture switching problem?