CSS style implementation of small triangle example on the right side of selection box-CSS Tutorial-php.cn

CSS style implementation of small triangle example on the right side of selection box

小云云

Release： 2018-01-19 09:45:09

Original

2485 people have browsed it

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>

Copy after login

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!