相关疑难解决方法(0)

响应式CSS三角形,百分比宽度

下面的代码将在<a>元素正下方创建一个箭头:

的jsfiddle

.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;   
}
Run Code Online (Sandbox Code Playgroud)
<a href="#" class="btn">Hello!</a>
Run Code Online (Sandbox Code Playgroud)

问题是我们必须指示链接宽度以获得适当大小的箭头,因为我们无法以像素为单位指示边框宽度.

如何制作响应三角形百分比?

css geometry css3 responsive-design css-shapes

31
推荐指数
3
解决办法
7万
查看次数

标签 统计

css ×1

css-shapes ×1

css3 ×1

geometry ×1

responsive-design ×1