directory

  • Introduction to the
  • advantages
  • The principle of
    • 1. Create a div
    • 2. Then put a border around the div.
    • 3. Give each of the div’s four borders a different color
    • 4. Change the width and height to 0
    • 5. Other corners are transparent
    • 6. Compatible with Internet Explorer 6
      • The reasons are as follows:
      • Simplest solution :(added later)
      • Other solutions:
    • 7. Solve the triangulation display problem of inline elements
      • Why is this a problem
      • The solution
        • 1. Remove fixed content heights
        • 2. Convert inline elements to block-level or inline block elements
        • 3. De-scaling elements (can be used directly if special layout is involved)
  • The final code
  • extension
    • An angled triangle
    • A triangle with a right Angle at one Angle
    • The arrow
    • dialog
    • Small rounded rectangle compatible with IE8
    • Use CSS3 rotation to make triangles

Introduction to the

There are several ways of triangulating:

  • Pictures, Sprites (NetEase)
  • Font icon (JD)
  • Pure code writing (Amazon)

Here the main introduction of pure code written.

advantages

  1. Code written triangle, no matter what size, is true.
  2. Code runs faster than graphics.
  3. If the font icon is not referenced in the project, the code writing is more reliable.

The principle of

The principle is to use the BORDER property in the CSS box model to achieve a good compatibility of triangle graphics effect, the bottom layer is influenced by the inseet/outset of border-style border 3D effect is very popular in the early Internet.

1. Create a div

<div></div>
Copy the code

2. Then put a border around the div.

div{
    width:200px;
    height:100px;
    border:10px solid red; 
}
Copy the code

You can see the effect:

3. Give each of the div’s four borders a different color

div{
    width:200px;
    height:100px;
    border-left:10px solid red;
    border-top:10px solid green; 
    border-right:10px solid blue; 
    border-bottom:10px solid yellow; 
}
Copy the code

You can see the following effects:

You can see that the hypotenuse exists where the two borders cross.

4. Change the width and height to 0

div{
    width:0px;
    height:0px;
    border-left:10px solid red;
    border-top:10px solid green; 
    border-right:10px solid blue; 
    border-bottom:10px solid yellow; 
}

/* or you could write */
div{
    width:0px; 
    height:0px;
    border:10px solid;   
    border-color:red green blue yellow;
}
Copy the code

You can see the following effects:

At this point it becomes apparent that there are four triangles. If one is to appear, make the other three transparent.

That’s where triangles come from.

5. Other corners are transparent

The Settings here also follow the order of top, right, bottom and left, making the unwanted corners transparent.

div{
    width:0px; 
    height:0px;
    border-width:10px;   
    border-color:#f00 transparent transparent transparent;
    border-style:solid;
}

/* can also be merged */
div{
    width:0px; 
    height:0px;
    border:10px solid;   
    border-color:#f00 transparent transparent transparent;
}
Copy the code

So the triangle is complete. So the problem comes, that is the compatibility problem, IE6 compatibility problem, if you do not require compatibility IE6 can ignore the next step.

6. Compatible with Internet Explorer 6

What does the same triangle look like in IE6?

The reasons are as follows:

  • Internet Explorer 6 does not support transparent border
  • The height of Internet Explorer 6 must be at least 19px and cannot be 0

Under IE6, it is impossible to set elements such as divs to heights below 19 pixels. This is because IE6 has a default line height, which is the default line height in IE6.

Simplest solution :(added later)

div{
    Transparent */ is not supported
    border-style:solid dashed dashed dashed;
    /* The minimum height is not 0*/
    overflow:hidden;
}
Copy the code

Other solutions:

  1. If Internet Explorer 6 does not support Transparent,

Here’s what you can do:

div{
    border:solid 1px transparent; 
    _border-color:tomato; 
    _filter:chroma(color=tomato); 
}
Copy the code

So I think it can also be used here, BUT it has not been tested personally, if any little cutie has tested please let me know ^ ^.

div{
    width:0px;
    height:0px;
    margin:100px auto;
    border-width:10px;
    border-style:solid;
    border-color:#f00 transparent transparent transparent;
    _border-color:#f00 tomato tomato tomato; 
    _filter:chroma(color=tomato);
}
Copy the code
  1. If it is to solve the IE6 height problem (can also be preceded by an underscore, indicating compatible IE6)
div{
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden;
}
Copy the code

7. Solve the triangulation display problem of inline elements

Why is this a problem

Since we used

to make triangles, of course we often use
< I > or pseudo-elements to make little ICONS. So on the display, there might be a problem. The following code: 
<style>
em{
	width: 0;
	height: 0;
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
}
</style>

<em></em>
Copy the code

You can see that the page looks like this:

Why is that? Let’s take a closer look. It actually looks like this.

Cause this

  1. Because the elements in the row have a fixed height, you can’t set the width and height to 0, so it’s ok to put 50px on top and 50px on bottom, but you have a trapezoidal effect because of the spacing in the middle.
  2. And if there are no block elements above it, it starts from the content of the inline element, so the border above goes to the top of the browser’s viewable area.

The solution

There are many ways to do this:

1. Remove fixed content heights

Use the font – size: 0; You can remove the fixed height of the content.

em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	font-size: 0;
}
Copy the code
2. Convert inline elements to block-level or inline block elements
em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	display: block;   /* Can also be inline-block*/
}
Copy the code
3. De-scaling elements (can be used directly if special layout is involved)
/ * the * /
em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	position: absolute;
	top:0;
	left:0;
}

/ * or * /
em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	float:left;
}

Copy the code

The final code

Below is the triangle code compatible with IE6 version.

div{
    width:0px; /* Set width and height to 0*/
    height:0px;/* Do not write */
    border-width:10px;   /* Controls the size of the triangle, the vertical position */
    border-color:#f00 transparent transparent transparent;/* Top right bottom left, transparent */
    border-style:solid dashed dashed dashed;/* Set the bounding style. The last module is compatible with the */ module written by IE6
    overflow:hidden;/* Compatible with IE6 whose minimum height is not 0 */
}
Copy the code

Change the border-width to make the triangle larger, which is true. Very clear.

== The triangle is made. = =

extension

An angled triangle

The triangles above are made of 45 degrees, which can be determined by the height and width of the border.

For a triangle like this, you just need to make sure that the width of the top and bottom is different from the width of the left and right.

div{
	width: 0px;
	height: 0px;
	margin: 100px auto;
	border-width:10px 30px;
	border-color:transparent transparent transparent red;
	border-style:solid;
}
Copy the code

A triangle with a right Angle at one Angle

As you can see, the top and right triangles are set to the same color at the same time. You get right triangles.

div{
	width: 0;
	border-width: 20px 10px;
	border-style: solid;
	border-color: red red transparent transparent;
}
Copy the code

The arrow

In fact, the principle is simple, two triangles on top of each other. The top triangle is the color of the background

<style type="text/css">
.san {
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid; 
	position: relative;
	}
.si {
	border-width: 30px;
	border-color: transparent transparent transparent #fff;
	border-style: solid; 
	position: absolute;
	left: -50px;
	top: -30px;
}
</style>

<! - HTML structure -- -- >
<div class="san">
	<div class="si"></div>
</div>
Copy the code

dialog

This is easy to do with pseudo-elements.

<style type="text/css">
div{
	width: 150px;
	padding: 10px;
	line-height: 20px;
	color: #9c623f;
	background-color: rgba(255.236.193.0.72);
	border-radius: 10px;
	position: relative;
}
div::before{    
    content:"";   
    border-width: 10px; 
    border-color:transparent rgba(255.236.193.0.72) transparent transparent;
    border-style: solid; 
    position: absolute;  
    left: -20px;
    top: 10px;
}
</style>

<div class="select-toast">Good morning, ha ha! It's a nice day today, very nice!</div>
Copy the code

Small rounded rectangle compatible with IE8

The principle is a rectangle with pseudo-elements above and below it.

Before is a trapezoid that goes up and after is a trapezoid that goes down.

Be careful not to make it too wide, or you’ll end up with a cut rectangle, so you can avoid thatborder-radiusCompatibility problem of

<style type="text/css">
div{
	width: 140px;
	height: 40px;
    background-color: rgb(244.121.128);
	position: relative;
}
div:before,
div:after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    border-style: solid;
}
div:before {
    top: -3px;
    border-width: 0 3px 3px;
    border-color: transparent transparent red;
}
div:after {
    bottom: -3px;
    border-width: 3px 3px 0;
    border-color: red transparent transparent;
}
</style>

<div></div>
Copy the code

Use CSS3 rotation to make triangles

If you can use CSS3, you can also use the rotate property of the transform

The schematic is: Rotate the inside 45 degrees, and the outside overflow: Hidden

<style type="text/css">
	i,s{
		text-decoration: none;
		font-style: normal;
		display: block;
		width: 20px;
		height: 20px;
	}
	i{
		position: relative;
		overflow: hidden;
	}
	s{
		position: absolute;
		top: -14px;
		background: yellowgreen;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
</style>

<! - HTML structure -- -- >
<i>
	<s></s>
</i>
Copy the code

The final image is:

@version1.0 — November 8, 2018 — Create “CSS Triangle Writing (compatible with IE6)”

© burning_ rhyme groups