我想通过CSS获得以下UI。我尝试使用以下内容,但它不会产生我期望的输出。
background: linear-gradient(to bottom right, black 20%, white 20%);
(不需要黑色边框。它们仅用于边界)
任何人都可以提出任何建议或解决方案来解决这个问题吗?
答案 0 :(得分:3)
这也可以使用几个linear-gradient
背景图像来实现。我们所要做的就是创建具有所需大小的渐变,并将它们放置在元素的左上角和右上角。
线性渐变产生的输出是响应性的,一个优点是它不需要任何额外的伪元素(因此它们可以用于其他目的)。主要缺点是浏览器支持渐变。它们适用于所有现代浏览器,但不适用于IE9-。另一个问题是,当容器的尺寸变大时,已知渐变产生锯齿状边缘,但只要不需要边框,这不会成为大问题。
div {
position: relative;
height: 200px;
width: 175px;
background-color: rgb(34, 177, 76);
background-image: linear-gradient(to top left, transparent calc(50% - 1px), rgb(0, 162, 232) calc(50% + 1px)), linear-gradient(to top right, transparent calc(50% - 1px), rgb(0, 162, 232) calc(50% + 1px));
background-size: 30% 85%;
background-position: left top, right top;
background-repeat: no-repeat;
transition: all 2s; /* just for demo */
}
div:hover {
height: 400px;
width: 350px;
}

<div></div>
&#13;
如果需要,我们还可以通过使用渐变来更多地添加边框。
div {
position: relative;
height: 200px;
width: 175px;
background-color: rgb(34, 177, 76);
background-image: linear-gradient(to top left, transparent calc(50% - 1px), black 50%, black calc(50% + 1px), rgb(0, 162, 232) calc(50% + 2px)), linear-gradient(to top right, transparent calc(50% - 1px), black 50%, black calc(50% + 1px), rgb(0, 162, 232) calc(50% + 2px));
background-size: 30% 85%;
background-position: left top, right top;
background-repeat: no-repeat;
transition: all 2s;
/* just for demo */
border: 2px solid black;
}
div:hover {
height: 400px;
width: 350px;
}
&#13;
<div></div>
&#13;
答案 1 :(得分:2)
一种方法是使用::before
和::after
伪元素:
#foo{
position: relative;
height: 200px;
width: 200px;
background-color: green;
}
#foo::before, #foo::after{
content: '';
position: absolute;
top: 0;
width: 0;
height: 0;
border-style: solid;
}
#foo::before{
left: 0;
border-width: 200px 70px 0 0;
border-color: #007bff transparent transparent transparent;
}
#foo::after{
right: 0;
border-width: 0 70px 200px 0;
border-color: transparent #007bff transparent transparent;
}
&#13;
<div id="foo"></div>
&#13;