下面的代码将在< 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;
- }
- <a href="#" class="btn">Hello!</a>
问题是我们必须指出链接宽度以获得适当大小的箭头，因为我们无法指出边框宽度(以像素为单位)。
如何使基于百分比的响应三角形？
解决方法
您可以使用偏斜和旋转的伪元素在链接下创建响应三角形：
DEMO(调整结果窗口大小，看看它如何反应)
三角形的宽高比与padding-bottom属性保持一致。
如果您希望形状根据其内容适应其大小，则可以删除.btn类的宽度
- .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>
有关响应三角形的更多信息以及如何制作它们，您可以看一下
Triangles with transform rotate(简单而花式的三角形)
