向容器添加45度角 [英] Adding a 45 degree angle to a container
本文介绍了向容器添加45度角的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个容器元素，我想弄清楚，如果我可以塑造它有两个45度的角度。像这样：
这只是一个矩形现在：
< div id =home-img-text>
< div id =home-img-text-container>
< div id =home-img-text-description> WRECKING< br>& DEMOLITION< br> DONE RIGHT。< / div>
< / div>
< / div>
＃home-img-text-container {
background：rgba（0,0,0，.8）;
padding：30px 20px;
}
＃home-img-text-description {
color：#FFF;
font-size：2.5em;
line-height：1.4em;
}
我该如何做？
更新：
.home-img-text {
position：absolute;
left：10％;
top：25％;
}
＃home-img-text-container1，＃home-img-text-container2 {
position：relative;
margin-bottom：20px;
background：rgba（0,0,0，.8）;
opacity：0;
transition：1s; -webkit-transition：1s;
overflow：hidden;
}
＃home-img-text-container1.fadeDisplay {
opacity：1;
transform：translateX（30px）; -webkit-transform：translateX（30px）;
}
＃home-img-text-container2.fadeDisplay {
opacity：1;
transform：translateX（30px）; -webkit-transform：translateX（30px）;
}
＃home-img-text-description {
position：relative;
margin：40px 0px;
padding：30px 20px;
color：#FFF;
font-size：2.5em;
line-height：1.4em;
}
＃home-img-text-description2 {
color：#FFF;
font-size：2em;
line-height：1.4em;
padding：30px 20px;
}
/ * ----添加这个--- * /
＃home-img-text-description：before {
position：absolute;
content：'';
height：40px;
width：100％;
left：0px;
background：inherit;
}
＃home-img-text-description：before {
top：-40px;
transform：skewX（45deg）;
transform-origin：right bottom;
}
解决方案
使用两个伪元素（45度）倾斜也将是产生这种形状的良好选择。使用此选项的优点是，与使用边框方法创建的形状不同，它 在右上角和右下角生成透明剪切 。
由于 clip-path .com /＃feat = css-clip-pathrel =nofollow> IE中缺少支持。
＃home-img-text {overflow：hidden;}＃home-img-text-container {position：relative; background：rgba（0，0，0，.8）; padding：30px 20px; margin：40px 0px;}＃home-img-text-container：after，＃home-img-text-container：before {position：absolute; content：''; height：40px; width：100％; left：0px; background：inherit;}＃home-img-text-container：before {top：-40px; transform：skewX（45deg）; transform-origin：right bottom;}＃home-img-text-container：after {bottom：-40px; transform：skewX（-45deg）; transform-origin：right top;}＃home-img-text-description {color：#FFF; font-size：2.5em; line-height：1.4em;} body {background-image：radial-gradient（circle at center，chocolate，sandybrown）; min-height：100vh;}
< div id = home-img-text> < div id =home-img-text-container> < div id =home-img-text-description> WRECKING< br>& DEMOLITION< br>完成正确。< / div> < / div>< / div>
版本，在形状的所有侧面都有边框：
＃home-img-text {border-left：2px solid ; overflow：hidden;}＃home-img-text-container {position：relative; padding：30px 20px; margin：40px 0px; background：rgba（0，0，0，.8）; border-right：2px solid;}＃home-img-text-container：after，＃home-img-text-container：before {position：absolute; content：''; height：38px; width：100％; left：0px;背景：inherit; border：2px solid;}＃home-img-text-container：before {top：-40px; / * - （height + border-top）* / border-width：2px 3px 0px 0px; transform：skewX（45deg）; transform-origin：right bottom;}＃home-img-text-container：after {bottom：-40px; / * - （height + border-bottom）* / border-width：0px 3px 2px 0px; transform：skewX（-45deg）; transform-origin：right top;}＃home-img-text-description {color：#FFF; font-size：2.5em; line-height：1.4em;} body {background-image：radial-gradient（circle at center，chocolate，sandybrown）; min-height：100vh;}
< div id = home-img-text> < div id =home-img-text-container> < div id =home-img-text-description> WRECKING< br>& DEMOLITION< br>完成正确。< / div> < / div>< / div>
如果你需要添加一个图像（作为背景或者不是），它将需要额外的几个元素和元素具有固定的高度。但是如前所述，即使它需要额外的元素，这种方法也有其优点。
＃home-img-text {position ：相对; padding：40px 0px; / * top / bottom padding等于两个扭斜元素的高度，不要设置left / right padding * / overflow：hidden;}＃home-img-text-container {height：170px; / *图像的高度 - 2 *偏斜元素的高度* / padding：0px 20px; / *不设置任何顶部/底部填充* / background：linear-gradient（rgba（0，0，0，.8），rgba（0，0，0，.8）），url（http：// lorempixel.com/800/250/nature/1）; background-position：0px 0px，0px -40px; / * 0px 0px，0px - （偏斜元素的高度）* /}＃home-img-top，＃home-img-bottom {position：absolute; content：''; height：40px; width：100％; left：0px; overflow：hidden; }＃home-img-top {top：0px; transform：skewX（45deg）; transform-origin：right bottom;}＃home-img-bottom {bottom：0px; transform：skewX（-45deg）; transform-origin：right top;}＃home-img-top：before，＃home-img-bottom：before {position：absolute; content：'';高度：100％; width：100％; left：0px; background：linear-gradient（rgba（0，0，0，.8），rgba（0，0，0，.8）），url（http://lorempixel.com/800/250/nature/1）; }＃home-img-top：before {top：0px; background-position：0px 0px，0px 0px; transform：skewX（-45deg）; transform-origin：right bottom;}＃home-img-bottom：before {bottom：0px; background-position：0px 0px，0px -210px; / * 0px - （图像的高度 - 倾斜元素的高度）* / transform：skewX（45deg）; transform-origin：right top;}＃home-img-text-description {color：#FFF; font-size：2.5em; line-height：1.4em;} body {background-image：radial-gradient（circle at center，chocolate，sandybrown）; min-height：100vh;}
< div id = home-img-text> < div id =home-img-top>< / div> < div id =home-img-text-container> < div id =home-img-text-description> WRECKING< br>& DEMOLITION< br>完成正确。< / div> < / div> < div id =home-img-bottom>< / div>< / div>
I have a container element that I am trying to figure out if I can shape it to have two 45 degree angles. Like this:
It is simply a rectangle now:
<div id="home-img-text">
<div id="home-img-text-container">
<div id="home-img-text-description">WRECKING <br>& DEMOLITION <br> DONE RIGHT.</div>
</div>
</div>
#home-img-text-container {
background: rgba(0,0,0,.8);
padding: 30px 20px;
}
#home-img-text-description {
color: #FFF;
font-size: 2.5em;
line-height: 1.4em;
}
How would I go about doing this?
UPDATE:
.home-img-text {
position: absolute;
left: 10%;
top: 25%;
}
#home-img-text-container1, #home-img-text-container2 {
position: relative;
margin-bottom: 20px;
background: rgba(0,0,0,.8);
opacity: 0;
transition:1s; -webkit-transition:1s;
overflow: hidden;
}
#home-img-text-container1.fadeDisplay {
opacity: 1;
transform: translateX(30px); -webkit-transform: translateX(30px);
}
#home-img-text-container2.fadeDisplay {
opacity: 1;
transform: translateX(30px); -webkit-transform: translateX(30px);
}
#home-img-text-description {
position: relative;
margin: 40px 0px;
padding: 30px 20px;
color: #FFF;
font-size: 2.5em;
line-height: 1.4em;
}
#home-img-text-description2 {
color: #FFF;
font-size: 2em;
line-height: 1.4em;
padding: 30px 20px;
}
/*----Adding this ---*/
#home-img-text-description:before {
position: absolute;
content: '';
height: 40px;
width: 100%;
left: 0px;
background: inherit;
}
#home-img-text-description:before {
top: -40px;
transform: skewX(45deg);
transform-origin: right bottom;
}
解决方案
Using two pseudo-elements that are skewed in opposite directions (by 45 deg) would also be a good option for producing this shape. The advantage of using this option is that it produces a transparent cut on the right-top and right-bottom unlike the shapes created using the border method.
I wouldn't recommend clip-path (with or without SVG) because of the lack of support in IE.
#home-img-text{
overflow: hidden;
}
#home-img-text-container {
position: relative;
background: rgba(0, 0, 0, .8);
padding: 30px 20px;
margin: 40px 0px;
}
#home-img-text-container:after,
#home-img-text-container:before {
position: absolute;
content: '';
height: 40px;
width: 100%;
left: 0px;
background: inherit;
}
#home-img-text-container:before {
top: -40px;
transform: skewX(45deg);
transform-origin: right bottom;
}
#home-img-text-container:after {
bottom: -40px;
transform: skewX(-45deg);
transform-origin: right top;
}
#home-img-text-description {
color: #FFF;
font-size: 2.5em;
line-height: 1.4em;
}
body {
background-image: radial-gradient(circle at center, chocolate, sandybrown);
min-height: 100vh;
}
<div id="home-img-text">
<div id="home-img-text-container">
<div id="home-img-text-description">WRECKING
<br>& DEMOLITION
<br>DONE RIGHT.</div>
</div>
</div>
Here is a version with borders on all the sides of the shape:
#home-img-text{
border-left: 2px solid;
overflow: hidden;
}
#home-img-text-container {
position: relative;
padding: 30px 20px;
margin: 40px 0px;
background: rgba(0, 0, 0, .8);
border-right: 2px solid;
}
#home-img-text-container:after,
#home-img-text-container:before {
position: absolute;
content: '';
height: 38px;
width: 100%;
left: 0px;
background: inherit;
border: 2px solid;
}
#home-img-text-container:before {
top: -40px; /* -(height + border-top) */
border-width: 2px 3px 0px 0px;
transform: skewX(45deg);
transform-origin: right bottom;
}
#home-img-text-container:after {
bottom: -40px; /* -(height + border-bottom) */
border-width: 0px 3px 2px 0px;
transform: skewX(-45deg);
transform-origin: right top;
}
#home-img-text-description {
color: #FFF;
font-size: 2.5em;
line-height: 1.4em;
}
body {
background-image: radial-gradient(circle at center, chocolate, sandybrown);
min-height: 100vh;
}
<div id="home-img-text">
<div id="home-img-text-container">
<div id="home-img-text-description">WRECKING
<br>& DEMOLITION
<br>DONE RIGHT.</div>
</div>
</div>
If you need to add an image (either as background or not), it will need an extra couple of elements and the element to have a fixed height. but as mentioned earlier this approach has its advantages even if it needs extra elements.
#home-img-text {
position: relative;
padding: 40px 0px; /* top/bottom padding equal to height of the two skewed elements, don't set left/right padding */
overflow: hidden;
}
#home-img-text-container {
height: 170px; /* height of image - 2 * height of skewed element */
padding: 0px 20px; /* don't set any top/bottom padding */
background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)),url(http://lorempixel.com/800/250/nature/1);
background-position: 0px 0px, 0px -40px; /* 0px 0px, 0px -(height of skewed element) */
}
#home-img-top,
#home-img-bottom {
position: absolute;
content: '';
height: 40px;
width: 100%;
left: 0px;
overflow: hidden;
}
#home-img-top {
top: 0px;
transform: skewX(45deg);
transform-origin: right bottom;
}
#home-img-bottom {
bottom: 0px;
transform: skewX(-45deg);
transform-origin: right top;
}
#home-img-top:before,
#home-img-bottom:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
left: 0px;
background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url(http://lorempixel.com/800/250/nature/1);
}
#home-img-top:before {
top: 0px;
background-position: 0px 0px,0px 0px;
transform: skewX(-45deg);
transform-origin: right bottom;
}
#home-img-bottom:before {
bottom: 0px;
background-position: 0px 0px, 0px -210px; /* 0px -(height of image - height of skewed element) */
transform: skewX(45deg);
transform-origin: right top;
}
#home-img-text-description {
color: #FFF;
font-size: 2.5em;
line-height: 1.4em;
}
body {
background-image: radial-gradient(circle at center, chocolate, sandybrown);
min-height: 100vh;
}
<div id="home-img-text">
<div id="home-img-top"></div>
<div id="home-img-text-container">
<div id="home-img-text-description">WRECKING
<br>& DEMOLITION
<br>DONE RIGHT.</div>
</div>
<div id="home-img-bottom"></div>
</div>
这篇关于向容器添加45度角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
