三角形截面分离器的制作方法
How to make triangle section separator
我要做一个模型的整合。但我想知道是否有办法只在 CSS.
中做到这一点
我们有一个(对角线)三角形部分分隔符,但我不知道如何在 CSS 中制作它们(图像或 svg 除外)。如果这是可能的?
我的分隔符是这样的:
。
(这是该部分顶部的一个巨大的矩形三角形)。
我说的是蓝线上方的部分:
。
您知道是否可以使用 CSS 规则吗?
如果是这样,我该怎么做?
应该做这样的事情。使用 vw
(viewport-width)来跨越整个容器。
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 30px 100vw;
border-color: transparent transparent #007bff transparent;
}
<div class="triangle"></div>
您可以将其附加到容器上的 :before
伪选择器。
但是,您必须为跨浏览器兼容性做一些工作。有关支持的浏览器的详细信息和更新,请参阅此处的 caniuse。
这是一个 CSS3 方法:
HTML
<section class="diagonal">
CSS
body {
background: #333;
margin: 0px;
}
section {
position: relative;
margin-top:100px;
}
section:before {
position: absolute;
content:'';
}
.diagonal {
background: teal;
z-index: 1;
padding: 3em;
}
.diagonal:before {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 3% 0;
transform-origin: 3% 0;
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 75%;
background: inherit;
}
使用绝对定位的边框偏离容器顶部:
https://jsfiddle.net/Levde3kj/1/
HTML:
<div class="container">
<div class="triangle"></div>
</div>
CSS:
.container {
float: left;
width: 400px;
height: 200px;
margin-top: 25px;
background-color: blue;
position: relative;
}
.container .triangle {
position: absolute;
top: -25px;
left: 0;
border-style: solid;
border-width: 0 0 25px 400px;
border-color: transparent transparent blue transparent;
}
我要做一个模型的整合。但我想知道是否有办法只在 CSS.
中做到这一点我们有一个(对角线)三角形部分分隔符,但我不知道如何在 CSS 中制作它们(图像或 svg 除外)。如果这是可能的?
我的分隔符是这样的:
我说的是蓝线上方的部分:
您知道是否可以使用 CSS 规则吗? 如果是这样,我该怎么做?
应该做这样的事情。使用 vw
(viewport-width)来跨越整个容器。
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 30px 100vw;
border-color: transparent transparent #007bff transparent;
}
<div class="triangle"></div>
您可以将其附加到容器上的 :before
伪选择器。
但是,您必须为跨浏览器兼容性做一些工作。有关支持的浏览器的详细信息和更新,请参阅此处的 caniuse。
这是一个 CSS3 方法:
HTML
<section class="diagonal">
CSS
body {
background: #333;
margin: 0px;
}
section {
position: relative;
margin-top:100px;
}
section:before {
position: absolute;
content:'';
}
.diagonal {
background: teal;
z-index: 1;
padding: 3em;
}
.diagonal:before {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 3% 0;
transform-origin: 3% 0;
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 75%;
background: inherit;
}
使用绝对定位的边框偏离容器顶部:
https://jsfiddle.net/Levde3kj/1/
HTML:
<div class="container">
<div class="triangle"></div>
</div>
CSS:
.container {
float: left;
width: 400px;
height: 200px;
margin-top: 25px;
background-color: blue;
position: relative;
}
.container .triangle {
position: absolute;
top: -25px;
left: 0;
border-style: solid;
border-width: 0 0 25px 400px;
border-color: transparent transparent blue transparent;
}