如何创建具有百分比宽度的响应式 CSS 三角形？

生成具有百分比宽度的响应式 CSS 三角形

问题：

在 下面创建箭头使用 CSS 的元素可能会很棘手，因为箭头的边框宽度不能以像素为单位设置。这使得实现响应式三角形变得困难。

解决方案：

要使用 CSS 创建响应式三角形，可以使用倾斜和旋转的伪三角形

实现：

1. 创建外容器：

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

2. 添加三角形：

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

响应版本：

要使三角形响应，请将外部容器和三角形样式修改为如下：

1. 响应式容器：

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

2. 响应式三角形：

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

注意： padding-bottom 属性保持三角形的纵横比。删除 .btn 上的宽度允许形状根据其内容调整其大小。

此 CSS 实现创建一个具有基于百分比宽度的三角形，该三角形保持其纵横比并根据容器的尺寸调整其大小.

以上是如何创建具有百分比宽度的响应式 CSS 三角形？的详细内容。更多信息请关注PHP中文网其他相关文章！