本篇教程介绍了HTML+CSS入门 纯CSS画箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
原理:
把容器的边框设置大一点,容器本身的长宽为0,只设置一边的颜色让其自然形成 箭头
html>
* {
padding: 0;
margin: 0;
}
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
}
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 50%;
margin-left: -15px;
}
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!