Traditional Culture Encyclopedia - Weather forecast - How to draw a triangle with a border with css3?
How to draw a triangle with a border with css3?
If it is a square, we will use the border when we write the edge, but the triangle we are discussing here is the border itself, so it is impossible to add border attributes to the border, so we need to use other methods.
The easiest thing to think of is superposition. The idea is to superimpose two triangles, the outer triangle is slightly larger, and the color is set to the color required for the border; The inner triangle is definitely positioned inside. The whole can form the illusion of a triangle with a border.
This involves an absolute positioning problem. The triangle in the up, down, left and right directions is different from the parent triangle. First, let's take a look. When the positioning is 0 (left: 0pxtop:0px；; ) and what will happen.
HTML:
& lt！ -upward triangle->;
& ltdiv class = " triangle _ border _ up " & gt；
& ltspan & gt& lt/span>。
& lt/div & gt；
& lt！ -downward triangle->;
& ltdiv class="triangle_border_down " >
& ltspan & gt& lt/span>。
& lt/div & gt；
& lt！ -The triangle on the left->
& ltdiv class = " triangle _ border _ left " & gt；
& ltspan & gt& lt/span>。
& lt/div & gt；
& lt！ -The triangle on the right->
& ltdiv class = " triangle _ border _ right " >
& ltspan & gt& lt/span>。
& lt/div & gt；
CSS:
/* Up */
. Triangle _ Border _ Up {
Width: 0;
Height: 0;
Border width: 0 30px 30px
Border style: solid color;
Border color: transparent transparent # 333; /* Transparent gray */
Margin: 40px automatic;
Location: relative;
}
. Triangle _ Border _ Up Span {
Display: block;
Width: 0;
Height: 0;
Border width: 0 28px 28px
Border style: solid color;
Border color: transparent transparent # fc0/* transparent transparent yellow */
Location: absolute;
top:0px；
Left: 0px
}
/* Down */
. Triangle _ Border _ Down {
Width: 0;
Height: 0;
Border width: 30px 30px 0；;
Border style: solid color;
Border-color: #333 transparent transparent; /* Gray transparent */
Margin: 40px automatic;
Location: relative;
}
. Triangle _ Border _ Down Span {
Display: block;
Width: 0;
Height: 0;
Border width: 28px28px0;
Border style: solid color;
Border-color: #fc0 transparent; /* Yellow and transparent */
Location: absolute;
top:0px；
Left: 0px
}
/* Left */
. Triangle _ Border _ Left {
Width: 0;
Height: 0;
Border-width: 30px 30px 30px 0；;
Border style: solid color;
Border-color: transparent #333 transparent; /* transparent gray transparent */
Margin: 40px automatic;
Location: relative;
}
. Triangle _ Border _ Left Span {
Display: block;
Width: 0;
Height: 0;
Border width: 28px28px28px0;
Border style: solid color;
Border-color: transparent #fc0 transparent; /* transparent yellow transparent */
Location: absolute;
top:0px；
Left: 0px
}
/* Right */
. Triangle _ Border _ Right {
Width: 0;
Height: 0;
Border width: 30px 0 30px 30px
Border style: solid color;
Border color: transparent transparent # 333; /* Transparent transparent gray */
Margin: 40px automatic;
Location: relative;
}
. Triangle _ Border _ Right Span {
Display: block;
Width: 0;
Height: 0;
Border width: 28px 0 28px 28px
Border style: solid color;
Border-color: transparent transparent # fc0/* transparent transparent yellow */
Location: absolute;
top:0px；
Left: 0px
}
The effect is as shown in the figure:
Why is it not what we expected in the picture below?
The reason is that the triangle we see is an edge, not an area with real content. Please recall the contents of the box model of CSS.
Absolute position:absolute calculated according to the boundary of relative positioning parent layer content.
Combined with the last article, we first wrote an empty div with a width of 0:
This empty div has the content in the center, so the inner triangle is positioned according to the center point.
In order to see more clearly, we use the last method to add a shadow to the span:
1
box-shadow:0 0 2px rgba(0，0，0， 1)；
The effect is as shown in the figure:
This time, we clearly know that the inner triangle is located according to the actual point of the outer triangle, not the boundary of the triangle that we see with the naked eye.
HTML remains unchanged, CSS:
/* Up */
. Triangle _ Border _ Up {
Width: 0;
Height: 0;
Border width: 0 30px 30px
Border style: solid color;
Border color: transparent transparent # 333; /* Transparent gray */
Margin: 40px automatic;
Location: relative;
}
. Triangle _ Border _ Up Span {
Display: block;
Width: 0;
Height: 0;
Border width: 0 28px 28px
Border style: solid color;
Border color: transparent transparent # fc0/* transparent transparent yellow */
Location: absolute;
top: 1px；
Left:-28px;
}
/* Down */
. Triangle _ Border _ Down {
Width: 0;
Height: 0;
Border width: 30px 30px 0；;
Border style: solid color;
Border-color: #333 transparent transparent; /* Gray transparent */
Margin: 40px automatic;
Location: relative;
}
. Triangle _ Border _ Down Span {
Display: block;
Width: 0;
Height: 0;
Border width: 28px28px0;
Border style: solid color;
Border-color: #fc0 transparent; /* Yellow and transparent */
Location: absolute;
Top:-29px;
Left:-28px;
}
/* Left */
. Triangle _ Border _ Left {
Width: 0;
Height: 0;
Border-width: 30px 30px 30px 0；;
Border style: solid color;
Border-color: transparent #333 transparent; /* transparent gray transparent */
Margin: 40px automatic;
Location: relative;
}
. Triangle _ Border _ Left Span {
Display: block;
Width: 0;
Height: 0;
Border width: 28px28px28px0;
Border style: solid color;
Border-color: transparent #fc0 transparent; /* transparent yellow transparent */
Location: absolute;
top:-28px；
Left:1px;
}
/* Right */
. Triangle _ Border _ Right {
Width: 0;
Height: 0;
Border width: 30px 0 30px 30px
Border style: solid color;
Border color: transparent transparent # 333; /* Transparent transparent gray */
Margin: 40px automatic;
Location: relative;
}
. Triangle _ Border _ Right Span {
Display: block;
Width: 0;
Height: 0;
Border width: 28px 0 28px 28px
Border style: solid color;
Border-color: transparent transparent # fc0/* transparent transparent yellow */
Location: absolute;
top:-28px；
Left:-29px;
The effect is as shown in the figure:
Further write the triangle of the bubble box, as shown in the figure:
HTML:
& ltdiv class = " test _ triangle _ border " & gt；
& lta href = "#"> triangle
& ltspan & gt& ltem & gt& lt/em & gt； & lt/span>。 Writing triangles with borders with pure CSS
& lt/div & gt；
& lt/div & gt；
CSS:
. Test _ Triangle _ Border {
Width: 200px
Margin: 0 Auto 20px
Location: relative;
}
. Test _ triangle _ border a{
Color: # 333;
Font thickness: bold;
Text-Decoration: None;
}
. Test _ Triangle _ Border. Pop-up menu (
Width:100px;
Background: # fc0
Fill:10px20px;
Color: # 333;
Border-Radius: 4px
Location: absolute;
Top matching: 30px
Left: 30px
Border: 1px solid # 333;
}
. Test _ Triangle _ Border. Pop-up window range {
Display: block;
Width: 0;
Height: 0;
Border width: 010px10px;
Border style: solid color;
Border color: transparent transparent # 333;
Location: absolute;
top:- 10px；
Left: 50%; /* Triangle center display */
Left margin:-10px; /* Triangle center display */
}
. Test _ Triangle _ Border. Eject em{
Display: block;
Width: 0;
Height: 0;
Border width: 010px10px;
Border style: solid color;
Border color: transparent transparent # fc0
Location: absolute;
top: 1px；
Left:-10px;
}
(2) How to write the triangle of northeast, southeast, northwest and southwest?
Go on, write the triangle of northwest (↖), northeast (↗), southwest (↙) and southeast (↘).
The principle is shown in the figure:
According to the color division, each can have two kinds of CSS to write, using different edges to create the required triangle.
Write an example of nw(↖):
HTML:
1
& ltdiv class = " triangle _ border _ NW " & gt； & lt/div & gt；
CSS( 1):
. Triangle _ Border _ Northwest {
Width: 0;
Height: 0;
Border width: 30px 30px 0 0
Border style: solid color;
Border-color: #6c6 transparent transparent;
Margin: 40px automatic;
Location: relative;
}
CSS(2):
. Triangle _ Border _ Northwest {
Width: 0;
Height: 0;
Border width: 0 0 30px 30px
Border style: solid color;
Border-color: transparent transparent # 6c6
Margin: 40px automatic;
Location: relative;
}
Two CSS effects are shown in the figure:
The above is a triangle written in CSS, and it is advanced to
(1) triangle with border
(2) How to write the triangle of northeast, southeast, northwest and southwest?
- Previous article:Write a composition in the lovely small garden of the school.
- Next article:What do you think is the most beautiful poem?
- Related articles
- Good scenery, good weather, my good car, Willanda, smells good.
- Is the Wuran Temple Scenic Area in Kunyu Mountain, Weihai opened? Pictures of Wuran Temple, Kunyu Mountain, Weihai
- Geography is a compulsory course for senior one, Unit 2, Section 2, Atmosphere, Weather and Climate, Third Water Saving Circle and Water Cycle.
- How much does it cost to go to the Maldives? There are also details
- What plants can predict weather changes?
- In the summer with the highest temperature in a year, where should I choose to be a fishing spot if I want to explode my mouth?
- How do fashion-seeking boys look fashionable in summer?
- What is the license plate of Baoding 20 15 12.25 now?
- How much wheat does Crash 370 harvest in a day?
- Why do tires burst in summer?