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

Posted

技术标签:

【中文标题】具有百分比宽度的响应式 CSS 三角形【英文标题】：Responsive CSS triangle with percents width 【发布时间】：2014-10-11 04:41:44 【问题描述】：

下面的代码将在<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;   

<a href="#" class="btn">Hello!</a>

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

如何制作基于百分比的响应式三角形？

【问题讨论】：

相关问题：How can I use percents in border-* properties? 【参考方案1】：

您可以使用倾斜和旋转的伪元素在链接下创建一个响应式三角形：

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;
  transform-origin: 0 0;
  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（简单而精美的响应式三角形）

【讨论】：

虽然此解决方案适用于这种情况，但我只想向其他人指出，由于您的border-top:300px solid #fff; 它只能在白色（或纯色）背景上工作。用于隐藏 :after 旋转正方形的其余部分。 @GreatBlakes thx 指出，我已经解决了这个问题并编辑了答案。顶部边框不再需要，:after 伪元素的其余部分被 overflow:hidden; 隐藏。【参考方案2】：

以下代码的修改版本可以帮助您实现这一目标

html

<div class="triangle-down"></div>

CSS

.triangle-down 
    width: 10%;
    height: 0;
    padding-left:10%;
    padding-top: 10%;
    overflow: hidden;

.triangle-down:after 
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    margin-top:-500px;
    
    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-top: 500px solid #4679BD;

有关响应式三角形的进一步阅读：CSS triangles made responsive (archived link)

【讨论】：

这不是响应式的。 这是响应式的。你可以看看这里..jsfiddle.net/josedvq/3HG6d @lessismore 这很神奇，但是调整箭头的格式怎么样？这是可能的还是 1x1 比率是唯一的方法？【参考方案3】：

我找到了适用于任何宽度/高度的解决方案。你可以使用两个带有linear-gradient 背景的伪元素，像这样，(fiddle)：

.btn 
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;

.btn:before 
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 50%;
    height: 10px;
    background: linear-gradient(to right bottom, gray 50%, transparent 50%)


.btn:after 
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 50%;
    height: 10px;
    background: linear-gradient(to left bottom, gray 50%, transparent 50%)

【讨论】：

这是个好主意，但边缘真的“撕裂”了【参考方案4】：

另一个解决方案是使用 CSS 剪辑路径从彩色块中剪辑出三角形。但是不支持 IE，但可以用于内部工具等。

DEMO

使用 SCSS 轻松编写。

.outer 
  background: orange;
  width: 25%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1em;

  p 
    margin: 0;
    text-align: center;
    color: #fff;
  

  &:after 
    content: '';
    position: absolute;
    top: 100%;
    left: 0; 
    right: 0;
    padding-bottom: 10%;
    background: orange;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);

【讨论】：

这比选择的答案干净多了。投赞成票并热烈握手。 这确实是一个完美的答案。 这个解决方案非常完美，简单明了 这很好，但在 Safari/Mac 上会失败:(【参考方案5】：

我接受了@Probocop 的回答并得出以下结论：

<style>
    .btn 
        background-color: orange;
        color: white;
        margin-bottom: 50px;
        padding: 15px;
        position: relative;
        text-align: center;
        text-decoration: none;
    

    .btn:after 
        background-color: inherit;
        clip-path: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="p" clipPathUnits="objectBoundingBox"%3E%3Cpolygon points="0 0, 1 0, 0.5 1" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#p'); /* fix for firefox (tested in version 52) */
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
        content: '';
        height: 50px;
        left: 0;
        position: absolute;
        right: 0;
        top: 100%;
    
</style>

<a href="#" class="btn">Hello!</a>

这适用于 Chrome，我已经为 Firefox 添加了修复程序。它在 Edge 中不起作用，但是如果你降低向下箭头的高度，它看起来就不会那么糟糕了。

请注意，如果您使用引导程序，则需要更改名称或覆盖它应用的某些样式。如果您决定重命名它，那么您还需要在 .btn 样式中添加以下内容：

box-sizing: content-box;

【讨论】：

【参考方案6】：

我尝试了其他答案，发现它们过于复杂和/或难以操作三角形的形状。我决定改为创建一个简单的三角形作为 svg。

可以将三角形高度设置为绝对值，或者设置为矩形的百分比，以便在必要时可以在两个方向上做出响应。

html, body
  height:100%;
  width:100%;

.outer
  width:20%;
  height:25%;
  background:red;
  position:relative;
  

.inner
  height:100%;
  width:100%;
  background-color:red;

.triangle-down
  height:25%;
  width:100%;
  position:relative;

.triangle-down svg
  height:100%;
  width:100%;
  position:absolute;
  top:0;

svg .triangle-path
  fill:red;

<div class="outer">
<div class="inner"></div>
  <div class="triangle-down">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 1">
 <g>
  <path class="triangle-path" d="M0,0 l2,0 l-1,1 z" />
 </g>
</svg>
</div>

测试过 FF、Chrome、IE、Edge、mob Safari 和 mob Chrome

【讨论】：

【参考方案7】：

另一种选择是使用背景衬垫渐变和弹性定位，以确保三角形始终缩放到其父容器。无论您制作的容器有多宽或多窄，三角形总是随它缩放。这是小提琴：

https://jsfiddle.net/29k4ngzr/

<div class="triangle-wrapper-100">
  <div class="triangle-left"></div>
  <div class="triangle-right"></div>
</div>

.triangle-wrapper-100 
    width: 100%;
    height: 100px;
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;

.triangle-right 
    right: 0px;
    background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
    width: 50%;
    height: 100px;

.triangle-left 
    left: 0px;
    background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
    width: 50%;
    height: 100px;
    transform: scaleX(-1);

【讨论】：

以上是关于具有百分比宽度的响应式 CSS 三角形的主要内容，如果未能解决你的问题，请参考以下文章

如何制作具有相同宽度百分比的响应式表格？

如何以百分比设置 jQuery Mobile 1.4 响应式面板的宽度？

响应式 div 全宽底部的中心三角形

具有悬停效果的响应三角形

没有预定义宽度的响应式砌体布局

响应式图片（基于宽度百分比的图像缩放）