How to Create Responsive CSS Triangles with Percentage Width?

Solution:

To create a responsive triangle using CSS, you can use a skewed and rotated pseudo element.

Implementation:

1. Create an outer container:

   .btn {
     position: relative;
     display: inline-block;
     width: 100px;  /* Set a fixed width for demonstration purposes */
     height: 50px;
   }

   Copy after login

2. Add the triangle:

   .btn:after {
     content: "";
     position: absolute;
     bottom: -10px;
     left: 0;
     width: 0;
     height: 0;
     border-width: 10px 50px 0 50px;
     border-style: solid;
     border-color: gray transparent transparent transparent;   
   }

   Copy after login

Responsive Version:

To make the triangle responsive, modify the outer container and triangle styles as follows:

1. Responsive Container:

   .btn {
     position: relative;
     display: inline-block;
     width: 50%;  /* Set a percentage width for responsiveness */
     height: 50px;
   }

   Copy after login

2. Responsive Triangle:

   .btn:after {
     top: 50px;  /* Adjust the top position */
     background-color: inherit;
     padding-bottom: 50%;
     width: 57.7%;
     transform-origin: 0 0;
     transform: rotate(-30deg) skewX(30deg);
   }

   Copy after login

Note: The padding-bottom property maintains the triangle's aspect ratio. Removing the width on .btn allows the shape to adjust its size based on its content.

This CSS implementation creates a triangle with a percentage-based width that maintains its aspect ratio and adjusts its size based on the container's dimensions.

The above is the detailed content of How to Create Responsive CSS Triangles with Percentage Width?. For more information, please follow other related articles on the PHP Chinese website!