本文主要是介绍css 绘图——钉子，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<template><div class="nail"></div>
</template>
<style scoped>
/*使用before伪元素画圆*/
.nail:before {display: block;content: "钉子";height: 50px;width: 50px;border-radius: 50%;background-color: black;color: white;font-weight: bold;text-align: center;line-height: 50px;
}
/*使用after伪元素画三角*/
.nail:after {display: block;content: "";width: 0;height: 0;border: 25px solid transparent;border-top: 50px solid black;margin-top: -20px;
}
</style>这篇关于css 绘图——钉子的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
