Home > Developer > CSS

Create a triangle with pure CSS

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The small triangle below the dialog bubble box in the Web page is very useful, the method of drawing a lot of, want what font icon, small picture and so on all can, but are not nimble and quick, have the CSS3 after drawing a triangle is very simple

First of course is an arbitrary empty tag to when the small triangle, the bottom of the CSS can be thrown in:

The code is as follows

. triangle{
left:50%;
margin-left:-5px;
width:5px;
height:5px;
Background: #FAFAFA;
bottom:-4px;
Position:absolute;
Transform:rotate (45DEG);
-ms-transform:rotate (45DEG);
-moz-transform:rotate (45DEG);
-webkit-transform:rotate (45DEG);
-o-transform:rotate (45DEG);
border:1px solid #E5E5E5;
Border-top:none;
Border-left:none
}

The code uses the CSS3 2D rotation property to rotate the square, and hides the top and right sides of the border to achieve the small triangle.

Example

The code is as follows

<! DOCTYPE html>
<meta charset= "UTF-8" >
<script type= "Text/javascript" src= "/libs/jquery/1.4.4/jquery.min.js" ></script>
<title> three methods of realizing triangle with pure CSS </title>
<link rel= "stylesheet" >
<style type= "Text/css" >
. page-info {padding:8px 15px; background: #fcea9e; border-bottom:1px solid #b6bac0; Font:normal 16px Georgia;}
. page-info h1 {float:left;}
. page-info a {font-weight:bold; color: #222;}
. return-article {Float:right}
. return-article h2{Display:inline;

/*border Simulation tips*/
. message-box {position:relative; float:left; margin:80px 0 0 100px; width:240px;

height:60px; line-height:60px; Background: #E9FBE4; box-shadow:1px 2px 3px #E9FBE4;

border:1px solid #C9E9C0; border-radius:4px; Text-align:center; Color: #0C7823; }
. triangle-border {position:absolute; left:30px; overflow:hidden; width:0; height:0;

border-width:10px; Border-style:solid dashed dashed dashed; }
. tb-border {bottom:-20px Border-color: #C9E9C0 transparent transparent transparent;}
. tb-background {bottom:-19px Border-color: #E9FBE4 transparent transparent transparent;}

/* Character Simulation tips*/
. triangle-character {position:absolute; left:30px; overflow:hidden; width:26px; height:26px; font:normal 26px "Arial";}
. tc-background {bottom:-12px; color: #E9FBE4;}
. tc-border {bottom:-13px; color: #C9E9C0;}

/*CSS3 Transfrom Simulation tips*/
. triangle-css3 {position:absolute; bottom:-8px; bottom:-6px; left:30px; overflow:hidden; width:13px; height:13px; Background: #E9FBE4; border-bottom:1px solid #C9E9C0; border-right:1px solid #C9E9C0;}
. Transform {-webkit-transform:rotate (45deg);-moz-transform:rotate (45deg);-o-transform:rotate (45deg);

Transform:rotate (45DEG); }
/*ie7-9*/
. ie-transform-filter {
-ms-filter: "Progid:DXImageTransform.Microsoft.Matrix (m11=0.7071067811865475, m12=-0.7071067811865477, m21= 0.7071067811865477, m22=0.7071067811865475, sizingmethod= ' auto expand ') ";
Filter:progid:DXImageTransform.Microsoft.Matrix (m11=0.7071067811865475,m12=-0.7071067811865477,

m21=0.7071067811865477,m22=0.7071067811865475,sizingmethod= ' Auto expand ');
}
</style>
<body>
<div class= "Message-box" >
<span> I was implemented using the border attribute </span>
<div class= "Triangle-border tb-border" ></div>
<div class= "Triangle-border tb-background" ></div>
</div>

<div class= "Message-box" >
<span> I was implemented using the character </span>
<div class= "Triangle-character tc-border" > </div>
<div class= "Triangle-character tc-background" > </div>
</div>

<div class= "Message-box" >
<span> I was implemented using CSS Transfrom properties </span>
<div class= "Triangle-css3 transform Ie-transform-filter" ></div>
</div>

</body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More