How to Create a Responsive CSS Triangle Using Percentages?-CSS Tutorial-php.cn

How to Create a Responsive CSS Triangle Using Percentages?

Linda Hamilton

Release： 2024-12-03 00:24:12

Original

778 people have browsed it

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

Copy after login

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

Copy after login

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!