Home > Developer > Web Develop
Today on the cattle online to see this problem, found that they do not, it seems that their own CSS is not how to learn, also not very much. Read the answer, not very clear, also in the online collection of some information and solutions, feel some students blog also wrote some solutions and expand, so it is here to learn from it. (Reference address: http://www.ithao123.cn/content-5672159.html)
The effect of implementing the diagram involves two main points: one is before, after pseudo-element, and the other is border
1, before and after are pseudo-elements in CSS, adding new content to an element given a property content
Before: Used to insert new content before the element.
After: Used to insert new content after the element.
(1) Before add a content instance to an element:
<p> Me </p>
If you set a before for this P element:
P:before { content:"Love You";}This p becomes: I love you, the value of the content property is added to the front of the P element content.
(2) After adding a content instance to an element:
<p> Me </p>
P:after { content:"20 years old";}This p will become: I'm 20 years old.
2, the use of pseudo-elements to set CSS style, such as the point of the problem, the title only give a Div, can only make the left side of the border square, the right side of the sharp angle? That can be done by this pseudo-element.
Thinking Analysis:
(1) Draw the square first.
1 #demo 2 width:100px; 3 height:100px4 background-color:#fff; 5 Border: 2px #000 solid; 6 position: relative; 7 }
(2) A sharp angle is produced by before or after. Put it in the upper right corner of the square.
1) First, let's review the border properties.
Thin (fine border) medium (medium border) thick (fine border) 10px (pixel value) only works if the border style is not none
2) Boder Example:
1 2 3 <title></title>4 <style type= "Text/css" >5 #demo{6 width:20px;7 Height:20px;8 Background-color:#fff;9 Border:20px #000 Solid;Ten One} A </style> - - <body> the <div id= "Demo" > - - </div> - </body> +
1 #demo2{3 width:20px;4 Height:20px;5 Background-color:#fff;6 Border-left:20px Pink Solid;7 Border-right:20px Red Solid;8 Border-top:20px Green Solid;9 Border-bottom:20px Blue Solid;Ten}View Code#demo { width:0px; height:0px; background-color:#fff; border-left: 20px pink solid; border-right:20px red solid; border-top:20px Green solid; border-bottom:20px blue solid;}View Code3) Expand thinking, if the three-side border is transparent, is it possible to implement a small triangle?
{ width : 0px ; : 0px ; Background-color : #fff ; Border-left : 20px pink solid ; /* border-right:20px red solid; border-top:20px Green solid; border-bottom:20px Blue solid; */} view code Experimental Results: The page is blank. Cause: Because if only the left border is set, and the div is 0, the left box is not extended to the upper and lower ends.
#demo { width : 0px ; : 0px ; Background-color : #fff ; Border-left : 20px pink solid ; /* border-right:20px red solid; */ Border-top : 20px green solid ; Border-bottom : 20px Blue solid ; view code Experimental results:. Analysis: The left border is not set, so the upper and lower borders extend only to the right.
#demo { width:0px; height:0px; background-color:#fff; border-left: 20px Pink solid; /* border-right:20px red Solid; */ border-top:20px transparent solid; border-bottom:20px transparent solid;}View CodeExperimental results: analysis, the upper and lower border settings transparent, left box up and down the extension.
#demo { width:0px; height:0px; Border: 20px transparent solid; border-left-color: #000;}(3) Place the triangle on the right side of the square.
Analysis: The square is missing a paragraph, we can let the triangle color for white cover off the square border, in addition to a black triangle with a larger than the white triangles placed under the white triangle, so that only leakage of the triangle of two edges, so here to use the before and after.
1) since before and after inserted triangles are placed in the specified position, so their position are set to absolute positioning Absolute, then the DIV will be set to relative positioning relative.
Here's a look at the difference between positioning: position (static (default) |relative|fixed|absolute)
Static: Top left right bottom according to browser's normal document flow
Relative: Relative to the static original position. That is, the default location
Absolute is positioned relative to the parent element, the parent element's position must be relative or absolute, and if not, continue to look up the parent element and, if it is not found, the last relative to the body.
Fixed: relative to BODY element
2) First draw a black triangle
1 #demo: Before{2 content:"';3 width:0;4 Height:0;5 Border:Solid Transparent;6 Left:100%;7 Top:18px;8 position:Absolute;9 Border-width:12px;Ten Border-left-color:#000; One}
Experimental results:
3) Draw a white triangle
1 #demo: after2{3 content:"';4 width:0;5 Height:0;6 Border:Solid Transparent;7 Left:100%;8 Top:20px;9 position:Absolute;Ten Border-width:10px; One Border-left-color:#fff; A}
Experimental results:
(4) Organize CSS overlapping properties, simplify the code, the final full page HTML code is as follows:
1 2 3 <title>demo</title>4 <style type= "Text/css" >5 #demo6{7 width:100px;8 Height:100px;9 Background-color:#fff;Ten position:relative; One Border:2px solid #000; A} - - #demo: Before, #demo: after the{ - Border:Solid Transparent; - content:"'; - Height:0px; + width:0px; - Left:100%; + position:Absolute; A} at #demo: Before{ - Border-width:12px; - Border-left-color:#000; - Top:18px; - -} in #demo: after -{ to Top:20px; + Border-width:10px; - Border-left-color:#fff; the} * $ </style>Panax Notoginseng - <body> the <div id= "Demo" > + A </div> the </body> + View Code
(5) Finally fully understood, slept. 2015-09-11 00:46:11 Meggie
Baidu front-end written question--css realize a square with a sharp angle
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
