When making web pages, we usually see such a demand (make a triangle).
First of all
.box{
width: 0;
height: 0;
border: 50px solid ;
border-color: #000 #FF0000 #FFFF00 #00FFFF;
}
</style>
</head>
<body >
<div class="box"></div>
</body>
If you need that, just hide the other three
.box{
width: 0;
height: 0;
border: 50px solid ;
border-color: #000 transparent transparent transparent;
}
</style>
</head>
<body >
<div class="box"></div>
There is also this kind of demand.
This kind of triangle arrow is very common in web pages.
- Use & gt; & lt; to make and then rotate according to the situation
- Directly upload the icon (direct to lconfont-Alibaba vector icon library to download)
.b{
font-weight: bold;
position: absolute;
transform: rotate(90deg);
}
</style>
</head>
<body >
<div class="b">></div>
</body>
