結構

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

some text