For more information about CSS corner creation, let's talk about the history. Before CSS + DIV became popular, that is, when using tables as web page frameworks, people add an angle image to a cell to achieve this effect. This technology is completely outdated and will not be discussed here. After the rise of CSS + DIV, there were two ways to create diagonal effects. One was to add a diagonal image as the background through the backgroud-image attribute and indent the content with the padding attribute, the value does not exceed the corner. This method is not discussed in this article.
This time we will talk about the oblique angle created by pure CSS, that is, no image is needed at all.
It is much easier to create an angle than to create a corner with pure CSS. See the following example:
<head>
<style type = "text / css">
* {margin: 0; padding: 0; list-style: none;}
#wrapper {
height: 0;
width: 0;
border-top: 20px solid red;
border-right: 20px solid blue;
border-bottom: 20px solid green;
border-left: 20px solid grey;
}
</ style>
</ head>
<body>
<div id = "wrapper">
</ div>
</ body> <br /> <center> If the effect cannot be displayed, please press Ctrl + F5 to refresh this page. More web code: <a href = 'http: //www.bkjia.com/' target = '_ blank '> http://www.bkjia.com/ </a> </ center>
Tip: You can modify the code and run it again!
效果 The effect after running is like:
After you see the picture, you should already know the principle of bevel angle generation. The border between two borders connected by an element is characterized by a bevel, increasing the width of the border and filling it with different colors. This produces oblique angles that are visible to the naked eye.
Let's take a look at how to generate bevels at other angles. Look at the following code:
<style type = "text / css">
span {
width: 0px;
height: 0px;
}
span.left {
border-left: 90px solid white;
border-bottom: 160px solid red;
}
span.right {
border-right: 90px solid white;
border-bottom: 160px solid red;
}
</ style>
<div align = "center">
<span class = "left"> </ span>
<span class = "right"> </ span>
</ div> <br /> <center> If the effect cannot be displayed, please press Ctrl + F5 to refresh this page. More web code: <a href = 'http: //www.bkjia.com/' target = '_ blank '> http://www.bkjia.com/ </a> </ center>
Tip: You can modify the code and run it again!
效果 The effect after running is:
I believe that everyone understands here. For example, if you want to make a 60 ° bevel, calculate the tan (tangent) value of 60 ° and define the width of the relevant border according to the proportion.
Source: http://blog.imblol.com/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
