如何使用CSS3实现这样的设计。我试图给它一个非常高的透明边框,但这会使锥度向外而不是向内。
看起来像CSS可以实现的东西,这就是为什么我不愿意使用图像的原因。
答案 0 :(得分:3)
我建议您使用:before
和:after
来覆盖'渐变的部分内容div
。
问题是边界不支持'%'作为标准。因此,如果您的div需要响应更改边框的宽度,则必须使用@media
查询,如下所示。
<强> HTML 强>
<div id="angled"></div>
<强> CSS 强>
body{
margin:0;
padding:0;
}
#angled{
background: #6393c1;
background: -moz-linear-gradient(top, #6393c1 0%, #cfe7fa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6393c1), color-stop(100%,#cfe7fa));
background: -webkit-linear-gradient(top, #6393c1 0%,#cfe7fa 100%);
background: -o-linear-gradient(top, #6393c1 0%,#cfe7fa 100%);
background: -ms-linear-gradient(top, #6393c1 0%,#cfe7fa 100%);
background: linear-gradient(to bottom, #6393c1 0%,#cfe7fa 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6393c1', endColorstr='#cfe7fa',GradientType=0 );
width:500px;
margin:0 auto;
height:200px;
position:relative;
}
#angled:before,
#angled:after{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
content:" ";
height:0;
left:0;
right:0;
position:absolute;
bottom:0;
}
#angled:after{
border:30px solid rgba(255, 255, 255, 0);
border-bottom-width:0;
border-left-width:200px;
border-left-color:white;
}
#angled:before{
border:60px solid rgba(255, 255, 255, 0);
border-bottom-width:0;
border-right-width:300px;
border-right-color:white;
}
@media (min-width:800px){
#angled{
width:800px;
}
#angled:after{
border-left-width:350px;
}
#angled:before{
border-right-width:450px;
}
}
@media (min-width:1200px){
#angled{
width:1200px;
}
#angled:after{
border-left-width:500px;
}
#angled:before{
border-right-width:700px;
}
}
答案 1 :(得分:2)
以下内容应为您提供一个起点,关键是使用div
s :before
和after
伪元素的边框创建三角形。
HTML
<div></div>
CSS
html, body, div {
width:100%;
margin:0;
padding:0;
}
div {
height:100px;
width:600px;
background:#007bff;
}
div:before, div:after {
content:'';
position:absolute;
display:block;
}
div:before {
width: 0px;
height: 0px;
top:100px;
border-style: solid;
border-width: 0px 200px 50px 0;
border-color: transparent #007bff transparent transparent;
}
div:after {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 0 50px 400px;
border-color: transparent transparent transparent #007bff;
top:100px;
left:200px;
}
答案 2 :(得分:1)
看起来不错,所以没有?
我留下一个例子
<强> http://jsfiddle.net/jdQaA/1/ 强>
header{
display:inline-block;
background: white;
text-align: center;
width: 100%;
}
.main{
display:inline-block;
width: 1024px;
margin:0 auto;
min-height: 100px;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
position:relative;
}
.main:before{
content: '';
position: absolute;
top: 100%;
left: 100px;
height: 1px;
width: 100%;
border-left: 924px solid #7db9e8;
border-bottom: 50px solid transparent;
}
.main:after{
content: '';
position: absolute;
top: 100%;
left: 0px;
height: 1px;
width: auto;
border-left: 100px solid #7db9e8;
border-bottom: 50px solid transparent;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.container{
width: 1024px;
display:inline-block;
}
.submain{
float:right;
position: relative;
top: 60px;
width: 300px;
height: 300px;
background: #7db9e8; /* Old browsers */
background: -moz-linear-gradient(top, #7db9e8 0%, #1e5799 97%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(97%,#1e5799)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7db9e8 0%,#1e5799 97%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7db9e8 0%,#1e5799 97%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7db9e8 0%,#1e5799 97%); /* IE10+ */
background: linear-gradient(to bottom, #7db9e8 0%,#1e5799 97%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
margin-top: -25px;
}
.submain:before{
content: '';
position: absolute;
bottom: 100%;
left: 0px;
height: 1px;
width: auto;
border-right: 300px solid #7CB7E7;
border-top: 25px solid transparent;
}