html坐标轴箭头,HTML+CSS入门 纯CSS画箭头

本篇教程介绍了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知识！