CSS implementation of triangles

This is the seventh day of my participation in the August Challenge. For details, see:August is more challenging

# introduction

• Native CSS implements ICONSThe benefits of
  • The introduction of ICONS in the project is convenient, but for simple ICONS you can use CSS to reduce the pressure on the server.

The process of thinking

To observe theborderattribute

        width: 100px;
        height: 100px;
        border-top: 5px solid yellowgreen;
        border-bottom: 5px solid deeppink;
        border-left: 5px solid hotpink;
        border-right: 5px solid skyblue;
Copy the code

Turn it up at this pointborderValue, while shrinkingdivWide high

        width: 50px;
        height: 50px;
        border-top: 25px solid yellowgreen;
        border-bottom: 25px solid deeppink;
        border-left: 25px solid hotpink;
        border-right: 25px solid skyblue;
Copy the code

• If it’s not obvious at this point, remove the container width and height

      width: 50px;
      height: 50px;
      border-top: 25px solid yellowgreen;
      border-bottom: 25px solid deeppink;
      border-left: 25px solid hotpink;
      border-right: 25px solid skyblue;
Copy the code

• And that’s when it becomes obvious whenWhen the width and height inside the container are 0, the border from the originaltrapezoidalTurned out to betriangle
• It’s very clear at this point
  • Keep the orientation of the triangle you want
  • ‘Remove’ the remaining three useless sides
• Try to operation

    width: 0px;
    height: 0px;
    border-top: 50px solid yellowgreen;
    border-bottom: 50px solid deeppink;
    /* border-left: 50px solid hotpink; * /
    border-right: 50px solid skyblue;
Copy the code

• And you can see that
  • When one side is removed, it will continue to deform because there is no ‘support’
  • So you can keep the other borders and usetransparentMake others transparent

        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 50px solid transparent;
        border-right: 50px solid skyblue;
Copy the code

• This will enable you to achieve the desired orientation of the triangle by changing the transparent color of the corresponding border

• Or various forms of triangles

        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-bottom: 50px solid deeppink;
        border-right: 50px solid transparent;
Copy the code

• How to play the specific deformation, with their own mind.

Supplementary content (you can skip it)

The difference between link and @import

There are four ways to introduce CSS:

• Inline (style attribute on element)
• Inline (style tag)
• Outer chain (link)
• Import (@import)

The difference between link and @import

• Function of different

  • Link is an XHTML tag that, in addition to loading CSS, can also define things like RSS
  • @import belongs to the CSS category and can only load CSS

• Different loading sequence

  • When the link references the CSS, it is loaded at the same time as the page is loaded.
  • @import requires the page to be fully loaded before loading

• Different compatibility issues

  • Link is an XHTML tag and has no compatibility issues.
  • @import is not supported by earlier browsers because it is proposed in CSS2.1

• Different styles are supported

  • Link supports using JavaScript to control DOM style changes
  • @ import does not support

You may also be interested in the following

• JavaScript reads local file configuration (compatible with lower IE versions)
• How are some of the apis implemented in # VUE3.0?
• What are the front-end questions of one year’s work experience?
• # JavaScript Language Essentials series
• # Diagram HTTP series