結構
h1元素方框+偽元素三角形
三角形做法請參考這邊
範例
<h1>some text</h1>
h1 {
background-color: rgba(193, 215, 174, 0.3);
color: #90a955;
padding: 10px;
border-radius: 1px;
font-weight: 400;
position: relative;
font-size: 26px;
font-weight: 600;
}
h1:after {
content: " ";
width: 0px;
height: 0px;
position: absolute;
bottom: -16px;
right: 30px;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 16px solid rgba(193, 215, 174, 0.3);
}
Display