How to Create a Responsive CSS Triangle Using Percentage Width?

Creating a Responsive CSS Triangle with Percentage Width

The code provided below generates an arrow positioned 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 method requires specifying the link width to ensure the arrow's proper size. To address this limitation, we can employ a responsive approach using a skewed and rotated pseudo element:

.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 approach ensures that the triangle maintains its aspect ratio with the padding-bottom property. Removing the width property on the .btn class allows the triangle to adapt its size according to its content, making it fully responsive.

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