This is the 12th day of my participation in Gwen Challenge

Use CSS to write triangles

Let’s take the following effect diagram as an example to explain.

We can see that the “chat box” is a graphic wrapped with text. This graphic is not from a picture, but is actually a combination of two parts written with CSS. One is a prominent triangle on the left, and the other is a cuboid with a round border on the right.

The graph on the right is easy to implement by adding a border-radius, but what about the triangle on the left?

Reveal triangles in the CSS

The triangle is actually made up of border. Let’s take a look at the following code.

<style>
    .triangle {
      position: absolute;
      top: 50%;
      left: 50%;
      display: inline-block;
      width: 0;
      height: 0;
      border: 40px solid #cde6c7;
    }
</style>

<div class="triangle"></div>
Copy the code

We can see that in a 0 width and height div, setting a 20px border will create a square.

The border is actually divided into four parts: top, right, bottom and left. Let’s try to show the four parts in different colors.

.triangle {
      position: absolute;
      top: 50%;
      left: 50%;
      display: inline-block;
      width: 0;
      height: 0;
      border: 40px solid transparent;
      border-left-color: tomato;
      border-right-color: #cde6c7;
      border-top-color: wheat;
      border-bottom-color: thistle;
}
Copy the code

Have you noticed that the border of this square is actually composed of four triangles? So, if we want to get the green triangle on the right, the color of the other three triangles is set to transparent, so we can get the right triangle.

.triangle {
      position: absolute;
      top: 50%;
      left: 50%;
      display: inline-block;
      width: 0;
      height: 0;
      border: 40px solid transparent; /* * transparent */
      /* border-left-color: tomato; * /
      border-right-color: #cde6c7;
      /* border-top-color: wheat; * /
      /* border-bottom-color: thistle; * /
}
Copy the code

We also need to adjust the size and shape of the triangle. If we only adjust the width of the overall border, the size of the triangle can only be scaled, not changed to the shape of the triangle.

.triangle{...border: 20pxsolid transparent; . }Copy the code

Change the shape of a triangle

We sometimes write triangles that are not shaped like this. If we need to change the shape, we should change the local border width. Note that the “width” here is not the normal “width”, but the minimum distance from the edge to the center point. For example, we set the width of the right part of the border.

.triangle{...border-right-width: 90px; . }Copy the code

You can’t really see it in this picture, but what’s changing is the width, it looks like the right half is getting longer. If we draw the minimum distance between each edge and the center point, we can see that only the right margin is lengthened, resulting in the upper and lower parts of the border being lengthened, which is exactly what border-right-width does.

If we change the width of the triangle above the border, we can see that the “blue line” is longer.

.triangle{.../* border-right-width: 90px; * /
    border-top-width: 90px; . }Copy the code

So, we can use this property to write all kinds of triangles.

Implementing chat boxes

After knowing the principle of triangle, we can write the chat box mentioned at the beginning. It is suggested to write the triangle with pseudo element, write relative for the container, and use absolute for the pseudo element. In this way, it is better to locate the triangle to the position of the chat box.

<style>
.word {
      position: relative;
      display: inline-block;
      padding: 10px 20px;
      background: #cde6c7;
      border-radius: 10px;
      font-size: 16px;
      color: # 000;
}
.word:before {
      content: ' '; /* To use pseudo-elements, be sure to write content */
      position: absolute;
      top: 50%;
      left: -15px;
      transform: translateY(-50%);
      display: block;
      border: 8px solid transparent;
      border-right-color: #cde6c7;
}
</style>

<div class="word">A chat</div>
Copy the code

expand

Have you noticed that this method is not only suitable for triangles, but also for some complex shapes, such as two triangles forming a simple time funnel shape (border-radius is also used here).

.triangle {
    position: absolute;
    top: 50%;
    left: 20%;
    display: inline-block;
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-top-color: wheat;
    border-bottom-color: wheat;
    border-radius: 20px;
}
Copy the code

We can also change the width and height of the div to change the shape.

.triangle{...width: 15px;
    height: 15px; . }Copy the code

Add a background color to it, again a different pattern.

.triangle { ... background-color: tan; . }Copy the code

conclusion

All in all, in the CSS world, there are a lot of wonderful things, a simple border can play so many tricks. Go and write!