前端：html+css:伪类画箭头（实心）

一、效果图 

二、代码

html

<div class="rectangle">AC/DC</div>

css

/* 图形 */
.rectangle {position: relative;width: 50px;height: 20px;background-color: #3498db;color: white;
} 
.rectangle:before {content: '';position: absolute;top: 0;left: 50px;width: 0;height: 0;border-top: 10px solid transparent;border-left: 10px solid #3498db;border-bottom:10px solid transparent;
}