CSS三角形适合可变大小的div元素 [英] CSS triangle to fit variable sized div elements
问题描述
请参考我的小提琴。我的目标是创建一个三角形（放在一个div），并使其适合（角到角）。
这里是概述的规则：
- 将三角形放置在所有div
- 三角形的左下角应该适合所有div内的左下角。
- 这些div具有固定的宽度和高度，但在现实生活中，它们都是未知的，继承自父母。
- 对角线的角度对于每个div都是不同的，但这是确定的。
- 使用边框，渐变，变换或SVG来解决问题。我不想使用像canvas或PNG这样的固定像素解决方案。
.one {width：100px; / * Unknown * / height：30px; / * Unknown * / background：#ccc;}。two {width：40px; / * Unknown * / height：90px; / * Unknown * / background：#aaa;}。three {width：70px; / * Unknown * / height：70px; / * Unknown * / background：#aaa;}。triangle {width：0; height：0; border-style：solid; border-width：0 0 50px 50px; border-color：transparent transparent＃007bff transparent;}
; div class =one>< / div>< br>< div class =two>< / div>< br>< div class =three> div>< br>< div class =triangle>< / div>
使用 border 实现此效果将不适用于动态大小的容器，因为它们无法接受百分比值或根据尺寸。它们只能使用像素或视口单元。
可以通过在容器顶部放置一个伪元素来使用变换，但是它们需要计算基于三角方程的元素的高度和宽度。更简单的是渐变和SVG方法。
使用渐变：
你可以使用到[side] [side] 语法的渐变来做到这一点。这是响应，将适用于所有的容器大小。唯一的缺点是，在某些情况下，宽度或高度与其他宽度或高度相比过大时会出现锯齿状线条。
这样做的一个优点是， t需要任何额外的元素（SVG或HTML，甚至不是伪），但缺点是当需要悬停和点击效果三角形（限制在三角形的边界）。由于元素仍是一个矩形/正方形，即使鼠标在三角形之外但在容器内也会触发悬停或点击效果。
.one {width：100px; height：30px; background-color：#ccc;}。two {width：40px; height：90px; background-color：#aaa;}。three {width：70px; height：70px; background-color：#aaa;} div {background-image：linear-gradient（to top left，blue 50％，transparent 51％）;}
< div class =one>< / div>< br>< div class =two> ; / div>< br>< div class =three>< / div>< br>
使用SVG：
您也可以使用SVG
path元素，如下面的代码段。 SVG必须相对于容器绝对定位，并且具有父元素的宽度和高度的100％。
使用SVG对于渐变的三角形的优点是：
.one {width：100px; height：30px; background-color：#ccc;}。two {width：40px; height：90px; background-color：#aaa;}。three {width：70px; height：70px; background-color：#aaa;} div {position：relative;} div> svg {position：absolute;高度：100％; width：100％;} svg路径{fill：＃0007bf;} svg路径：hover {fill：crimson;}
< div class =one> < svg viewBox ='0 0 100 100'preserveAspectRatio ='none'> < path d ='M100,0 L100,100 0,100z'/> < / svg>< / div>< br>< div class =two> < svg viewBox ='0 0 100 100'preserveAspectRatio ='none'> < path d ='M100,0 L100,100 0,100z'/> < / svg>< / div>< br>< div class =three> < svg viewBox ='0 0 100 100'preserveAspectRatio ='none'> < path d ='M100,0 L100,100 0,100z'/> < / svg>< / div>< br>
Please refer to my fiddle. I was aiming to create a triangle (to be placed inside a div), and make it fit exactly (corner to corner).
Here are the rules outlined:
- Place the triangle inside all the div elements.
- The bottom left corner of the triangle should fit the bottom left corner inside all the divs.
- The top right corner of the triangle should fit the top right corner inside all the divs.
- The divs has fixed width and height BUT in real life they are all unknown, inherited from a parent.
- The angle of the diagonal will be different for every div but that is ok.
- Use borders, gradients, transform or SVG to solve the problem. I would not like to use fixed pixel solutions like canvas or PNG.
.one {
width: 100px;
/* Unknown */
height: 30px;
/* Unknown */
background: #ccc;
}
.two {
width: 40px;
/* Unknown */
height: 90px;
/* Unknown */
background: #aaa;
}
.three {
width: 70px;
/* Unknown */
height: 70px;
/* Unknown */
background: #aaa;
}
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 50px 50px;
border-color: transparent transparent #007bff transparent;
}
<div class="one"></div>
<br>
<div class="two"></div>
<br>
<div class="three"></div>
<br>
<div class="triangle"></div>
Achieving this effect with border will not be possible for dynamically sized containers because they cannot take percentage values or adapt based on a change in dimension of the container. They can only use either pixel or viewport units. Both those wouldn't be of much use for a dynamic container.
Transforms can be used by placing a pseudo-element on top of the containers but they would need calculations for height and width of the element based on trigonometric equations. The simpler ones would be the gradient and SVG approaches.
Using Gradient:
You can do this using a gradient with to [side] [side] syntax. This is responsive and would work for all container sizes. The only drawback is that there would be jagged lines in some cases where the width or height is too large compared to the other.
One advantage of this is that it doesn't require any extra elements (SVG or HTML, not even pseudos) but the drawback will be when hover and click effects are required for the triangle alone (restricted to the triangle's boundaries). Since the element is still a rectangle/square, the hover or click effect will be triggered even when the mouse is outside the triangle but within the container.
.one {
width: 100px;
height: 30px;
background-color: #ccc;
}
.two {
width: 40px;
height: 90px;
background-color: #aaa;
}
.three {
width: 70px;
height: 70px;
background-color: #aaa;
}
div {
background-image: linear-gradient(to top left, blue 50%, transparent 51%);
}
<div class="one"></div>
<br>
<div class="two"></div>
<br>
<div class="three"></div>
<br>
Using SVG:
You could also do it with SVG path element like in the below snippet. The SVG has to be positioned absolutely with respect to the container and have 100% of the parent's width and height.
The advantage of using SVG for the triangle over gradients is that hover and click effects can be added to the triangle alone.
.one {
width: 100px;
height: 30px;
background-color: #ccc;
}
.two {
width: 40px;
height: 90px;
background-color: #aaa;
}
.three {
width: 70px;
height: 70px;
background-color: #aaa;
}
div{
position: relative;
}
div > svg {
position: absolute;
height: 100%;
width: 100%;
}
svg path{
fill: #0007bf;
}
svg path:hover{
fill: crimson;
}
<div class="one">
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<path d='M100,0 L100,100 0,100z' />
</svg>
</div>
<br>
<div class="two">
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<path d='M100,0 L100,100 0,100z' />
</svg>
</div>
<br>
<div class="three">
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<path d='M100,0 L100,100 0,100z' />
</svg>
</div>
<br>
这篇关于CSS三角形适合可变大小的div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
