Home >Web Front-end >CSS Tutorial >CSS style implementation of small triangle example on the right side of selection box
CSS style implementation of small triangle example on the right side of selection box
- 小云云Original
- 2018-01-19 09:45:092502browse
This article introduces you to the method of using CSS style to write the small triangle on the right side of the selection box through example code. Friends who need it can refer to it. I hope it can help everyone.
The rendering is as follows:
Go directly to the code!
<!DOCTYPE html>
<html lang="en">
<head>
<title>小三角</title>
<style>
.up-triangle{
width:0px;
height:0px;
border-bottom:30px solid #000;
border-left:15px solid transparent;
border-right:15px solid transparent;
margin:100px auto;
}
.down-triangle{
width:0px;
height:0px;
border-top:30px solid #000;
border-left:15px solid transparent;
border-right:15px solid transparent;
margin:100px auto;
}
.left-triangle{
width:0px;
height:0px;
border-right:30px solid #000;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
margin:100px auto;
}
.right-triangle{
width:0px;
height:0px;
border-left:30px solid #000;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
margin:100px auto;
}
</style>
</head>
<body>
<p class="up-triangle"></p>
<p class="down-triangle"></p>
<p class="left-triangle"></p>
<p class="right-triangle"></p>
</body>
</html>Related recommendations:
jQuery operation css style tutorial
Angular4 How to display the CSS style sample code of content
Basic knowledge of mini program Detailed explanation of css style media tag
The above is the detailed content of CSS style implementation of small triangle example on the right side of selection box. For more information, please follow other related articles on the PHP Chinese website!