响应CSS三角形与百分比宽度 [英] Responsive CSS triangle with percents width
问题描述
下面的代码将在< a>
元素下方创建一个箭头:
The code below will create an arrow right below an <a>
element:
<a href="#" class="btn">Hello!</a>
.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;
}
问题是,我们必须指明链接宽度以获得适当大小的箭头,因为我们不能指示边框宽度(以像素为单位)。
The problem is that we have to indicate the link width to get an arrow of a proper size because we cannot indicate the border width in pixels.
如何制作回应三角形百分比?
推荐答案
您可以使用倾斜和旋转的伪元素在链接下创建响应三角形:
You could use a skewed and rotated pseudo element to create a responsive triangle under the link :
DEMO (调整结果窗口的大小以查看其反应)
DEMO (resize the result window to see how it reacts)
三角形使用 padding-bottom
属性保持其长宽比。
The triangle maintains it's aspect ratio with the padding-bottom
property.
如果您希望形状根据其内容调整大小,可以删除 .btn
类上的宽度
If you want the shape to adapt it's size according to it's content, you can remove the width on the .btn
class
.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;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(-30deg) skewX(30deg);
-ms-transform: rotate(-30deg) skewX(30deg);
transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/
body {
background: url('http://i.imgur.com/qi5FGET.jpg');
background-size: cover;
}
<a href="#" class="btn">Hello!</a>
有关响应三角形的更多信息以及如何创建它们,您可以查看
三角形与变形旋转 (简单和花式三角形)
For more info on responsive triangles and how to make them, you can have a look at Triangles with transform rotate (simple and fancy triangles)
这篇关于响应CSS三角形与百分比宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!