big caption

by winddweb

HTML

<div class="big-caption">
    可以复用的框框，<br />带箭头和边框和圆角哦。                  
</div>

CSS

body{
    font-family: "Hinagiro Sans GB","黑体", sans-serif;
}
.big-caption{
    width:400px;
    padding:5px 0;
    font-size: 20px;
    text-align: center;
    border: 3px solid red;
    border-radius: 50px;
    position: relative;
}
.big-caption::after{
    content: '';
    display: block;
    position: absolute;
    width: 0px;
    height: 10px;
    left: 30%;
    margin-left: -10px;
    top: 100%;
    border-top: red solid 20px;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
}