CSS is a very powerful thing, a lot of page effects, we can be directly implemented through CSS. What we are sharing today is a CSS-implemented fillet with arrows in the Tip box.
Effects such as:
This style mainly involves the use of CSS border style border and positioning style position.
Implementation code:
<! DOCTYPE html>
<meta charset= "UTF-8";
<title> Box </title> with rounded arrows,
<style>
body{
padding-top:200px;
}
. box{
border-radius:5px;
border:1px solid red;
width:300px;
height:150px;
Position:relative;
}
. box. s{
width:0;
height:0;
Border-color:transparent transparent #FA0505 transparent;
Border-style:dashed dashed solid dashed;
border-width:10px;
Position:absolute;
Top: -20px;
left:20px;
}
. box. S. i{
width:0;
height:0;
Border-color:transparent transparent #fff transparent;
Border-style:dashed dashed solid dashed;
border-width:10px;
Position:absolute;
Top: -9px;
Left: -10px;
}
</style>
<body>
<div class= "box";
<s class= "s";
<i class= "i" ></I>
</s>
</div>
</body>
Cue box with rounded arrows CSS implementation