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

本文主要是介绍前端：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;
}

这篇关于前端：html+css:伪类画箭头（实心）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---