How to Create a Responsive Percentage-Based Triangle in CSS?

CSS: Generating a Responsive Percentage-Based Triangle

The challenge arises from creating an arrow beneath a hyperlink element using CSS, but specifying the border width in pixels presents a limitation in responsiveness. This article demonstrates a solution that employs a skewed and rotated pseudo-element to achieve a triangle with percentage-based sizing.

Responsive Triangle Implementation

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

Within the ".btn" class, we remove the fixed width, allowing the triangle's size to adapt to the content's width. The ".btn:after" pseudo-element is positioned absolutely, skewX and rotated to create the triangle shape, and its background color matches the button's background.

By utilizing padding-bottom, we maintain the triangle's aspect ratio. This approach ensures that the triangle remains responsive, resizing proportionately to the text content and URL within the hyperlink.

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