How to Create a Responsive CSS Triangle Using Percentages?

Responsive CSS Triangle with Percents Width

The CSS code below creates an arrow right below an element:

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}

.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;   
}

However, this approach requires specifying the width of the link to achieve the desired arrow size. To create a responsive triangle that scales based on the link's width, use the following code:

.btn {
  position: relative;
  display: inline-block;
  height: 50px; width: 50%;
  text-align: center;
  color: white;
  background: gray;
  line-height: 50px;
  text-decoration: none;
  padding-bottom: 15%;
  background-clip: content-box;
  overflow: hidden;
}

.btn:after {
  content: "";
  position: absolute;
  top:50px;  left: 0;
  background-color: inherit;
  padding-bottom: 50%;
  width: 57.7%;
  z-index: -1;
  transform-origin: 0 0;
  transform: rotate(-30deg) skewX(30deg);
}

This code uses a skewed and rotated pseudo-element to create a triangle that maintains its aspect ratio based on the link's height. If you prefer the triangle's size to adapt to its content, remove the width from the .btn class.

The above is the detailed content of How to Create a Responsive CSS Triangle Using Percentages?. For more information, please follow other related articles on the PHP Chinese website!