具有百分比宽度的响应式 CSS 三角形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25360411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive CSS triangle with percents width
提问by sdvnksv
The code below will create an arrow right below an <a>element:
下面的代码将在<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>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.
问题是我们必须指示链接宽度才能获得适当大小的箭头，因为我们无法以像素为单位指示边框宽度。
How to make a responsive triangle percent based?
如何使基于响应的三角形百分比？
回答by web-tiki
You could use a skewed and rotated pseudo element to create a responsive triangleunder the link :
您可以使用倾斜和旋转的伪元素在链接下创建响应三角形：
DEMO(resize the result window to see how it reacts)
DEMO（调整结果窗口的大小以查看其反应）
The triangle maintains it's aspect ratio with the padding-bottomproperty.
三角形保持其与padding-bottom属性的纵横比。
If you want the shape to adapt it's size according to it's content, you can remove the width on the .btnclass
如果您希望形状根据其内容适应其大小，则可以删除.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>For more info on responsive triangles and how to make them, you can have a look at Triangles with transform rotate(simple and fancy responsive triangles)
有关响应式三角形以及如何制作它们的更多信息，您可以查看 带有变换旋转的三角形（简单和花哨的响应式三角形）
回答by Probocop
Another solution to this would be to use a CSS clip-path to clip a triangle out of a coloured block. No IE support however, but could be used for internal tools etc.
另一个解决方案是使用 CSS 剪辑路径从彩色块中剪下三角形。但是不支持 IE，但可用于内部工具等。
Written with SCSS for ease.
用 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%);
}
}
回答by Alexandr Subbotin
I found solution that works with any width/height. You can use two pseudo-elements with linear-gradientbackground, like this, (fiddle):
我找到了适用于任何宽度/高度的解决方案。您可以使用两个带有linear-gradient背景的伪元素，如下所示（小提琴）：
.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%)
}
回答by lessismore
A modified version of the below code can help you to achieve this
以下代码的修改版本可以帮助您实现这一目标
HTML
HTML
<div class="triangle-down"></div>
CSS
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;
}
For further reading on responsive triangles: Responsive CSS Triangles
有关响应式三角形的进一步阅读：响应式 CSS 三角形
回答by Will Jenkins
I tried the other answers and found them to be either too complex and/or unwieldy to manipulate the shape of the triangle. I decided instead to create a simple triangle shape as an svg.
我尝试了其他答案，发现它们太复杂和/或笨拙，无法操纵三角形的形状。我决定创建一个简单的三角形作为 svg。
The triangle height can be set to an absolute value, or as a percentage of the rectangle so it can be responsive in both directions if necessary.
三角形的高度可以设置为绝对值，也可以设置为矩形的百分比，以便在必要时可以在两个方向上进行响应。
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>Tested FF, Chrome, IE, Edge, mob Safari and mob Chrome
已测试 FF、Chrome、IE、Edge、mob Safari 和 mob Chrome
回答by brett m
Another option would be to use background liner gradients, and flex positioning to make sure that the triangle always scales to its parent container. No matter how wide or narrow you make that container, the triangle always scales with it. Here is the fiddle:
另一种选择是使用背景衬里渐变和 flex 定位来确保三角形始终缩放到其父容器。无论您制作该容器多宽或多窄，三角形始终与它一起缩放。这是小提琴：
https://jsfiddle.net/29k4ngzr/
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);
}
回答by nfplee
I took @Probocop's answer and come up with the following:
我接受了@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>
This works in Chrome and I've added a fix for Firefox. It doesn't work in Edge, however if you decrease the height of the down arrow then it doesn't look so bad.
这适用于 Chrome，我为 Firefox 添加了修复程序。它在 Edge 中不起作用，但是如果您降低向下箭头的高度，那么它看起来并没有那么糟糕。
Please note that if you are using bootstrap you will need to either change the name or override some of the styles it applies. If you decide to rename it then you also need to add the following to the .btn style:
请注意，如果您使用引导程序，则需要更改名称或覆盖它应用的某些样式。如果您决定重命名它，那么您还需要将以下内容添加到 .btn 样式中：
box-sizing: content-box;
