倒三角形:
盒子宽高设为0px
border设置合适的宽度,border-top设置颜色,其它透明便可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
/* * 全局选择器*/
* {
margin: 0; /*清除body和body孩子的外边距*/
padding: 0; /*清除body和body孩子的内边距*/
}
body {
margin: 0; /*清掉body默认外边距*/
}
.box {
width: 0px;
height: 0px;
/* background-color: pink;*/
margin-top: 50px;
margin-left: 200px;
/*增大盒子 内减 width---》保证盒子正常放置 */
/* padding-left: 30px;*/
/*边框border: 宽度 px 边形 solid 实现 dotted 圆点 dashed虚线 none 没有边框 颜色 */
/* border: 100px solid red;*/
/*倒三角形*/
border-top: 10px solid blue;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
}
</style>
</head>
<body>
<div class="box"></div>
<p>空间的萨芬华润股份</p>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</body>
</html>