How to make a small sharp corner chat? Pure CSS make small sharp corners effect

Source: Internet
Author: User
Often see such a sharp angle, previously did not understand, thought are made out of pictures, and then surprised to find that many of them are made with CSS, both beautiful and save resources, really the both worlds!

So, how do you do this with CSS? First, write a simple code:

The code is as follows:

<p class= "Arrow" ></p><style type= "Text/css" >.arrow {    width:0;    height:0;    font-size:0;    Border:solid 10px #000;} </style>

Here, we can get a black square, which is actually a frame, because the width and height of p are all 0. So, we specifically to see, p width and height are 0 o'clock, it's up and down the four borders are what, below we have the border of each side color set to a different color:

<p class= "Arrow" ></p><style type= "Text/css" >.arrow {    width:0;    height:0;    font-size:0;    Border:solid 10px;    Border-color: #f00 #0f0 #00f #000;} </style>

We found that when the width and height of p is 0, its entire frame is composed of four triangles, each side of a triangle, then we can use this feature, to do cute small sharp angle. We just set the unwanted three-side border (triangle) color to be the same as the background, so you can only see the triangle you want, and then use the positioning to adjust the position. The specific code looks like this:

<p class= "Send" >    <p class= "Arrow" ></p></p><style type= "Text/css" >body {    Background: #4D4948;}. Send {    position:relative;    width:150px;    height:35px;    Background: #F8C301;    border-radius:5px; /* Round corner */    margin:30px auto 0;}. Send. Arrow {    position:absolute;    top:5px;    right:-16px; /* Fillet position requires careful commissioning oh */    width:0;    height:0;    font-size:0;    Border:solid 8px;    Border-color: #4D4948 #4D4948 #4D4948 #F8C301;} </style>

The results are as follows:

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.