Home > Article > Web Front-end > 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:092488browse

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of CSS hidden statisticsNext article：Detailed explanation of CSS hidden statistics

See more

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

Related articles