[英]Creating diagonal border-radius
After searching for a while for a solution for this I've come up with none. 在找了一段时间寻找解决方案后,我没有提出任何问题。 What I'm trying to do is create a diagonal border on the first
li
element's top left
corner.. I tried using a solution that involved the background
property but it doesn't give me quite what I want. 我正在试图做的是建立在第一对角线边框
li
元素的top left
的角落。我尝试使用所涉及的解决方案background
属性,但它并没有给我我想要什么比较。 Also it doesn't allow any manipulation of the colors which will be needed later on. 此外,它不允许对以后需要的颜色进行任何操作。
The light blue color should be a border that gets cut (and not a background that gets cut) and the dark grey should be the background of the li
. 浅蓝色应该是被切割的边框(而不是被切割的背景),深灰色应该是
li
的背景。
How can I achieve this via CSS? 我怎样才能通过CSS实现这一目标? A JS/Jquery solution would work as well.
JS / Jquery解决方案也可以使用。
EDIT: After seeing a lot of misinterpreted answers to my question I'll clarify it a bit: 编辑:在看到我的问题的许多错误解释后,我会澄清一点:
The left image is what I have now, the right image should be the result. 左图是我现在拥有的,右图应该是结果。
.cal-scheme {
width: 100%;
li {
width: calc(100% / 6);
height: 150px;
margin: 0;
padding: 0;
border: $thin-blue;
box-sizing: border-box;
float: left;
&:first-child {
background: linear-gradient(135deg, transparent 20px, $light-blue 0);
border: 0;
}
}
}
If I understand question, You need something like this 如果我理解的问题,你需要的东西像这样
HTML: HTML:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS: CSS:
body {
background: darkgrey;
}
li {
display: block;
list-style: none;
width: 200px;
height: 50px;
background: lightblue;
position: relative;
border: 10px solid lightblue;
margin-top: 5px;
}
li:first-child:after {
content: '';
display: block;
width: 0;
height: 0;
border: 15px solid transparent;
border-right-color: darkgrey;
position: absolute;
top: -15px;
left: -15px;
transform: rotate(45deg);
}
UPDATE: 更新:
You can't achieve with border-radius. 你无法用border-radius实现。 Just using css shapes, or hacks like this updated fiddle
只是使用CSS形状,或像这个更新的小提琴黑客
HTML: HTML:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS: CSS:
body {
background: darkgrey;
}
li {
display: block;
list-style: none;
width: 200px;
height: 50px;
background: darkgrey;
position: relative;
border: 2px solid lightblue;
margin-top: 5px;
}
li:first-child:after {
content: '';
display: block;
width: 30px;
height: 30px;
background: darkgrey;
border-right: 2px solid lightblue;
position: absolute;
top: -17px;
left: -17px;
transform: rotate(45deg);
}
How about achieving that like this? 如何达到这样的目标呢? without
border-radius
property WORKING FIDDLE 没有
border-radius
属性WORKING FIDDLE
Also have look at The Shapes of CSS on css-tricks. 还可以看一下css-tricks上的CSS 形状 。
HTML HTML
<div class="square">
<div class="cut-fold"></div>
</div>
CSS CSS
body {
background: #2D2D2D;
}
.square {
background: #5E9EE8;
position: relative;
width: 300px;
height: 300px;
}
.cut-fold {
background: #2d2d2d;
height: 75px;
position: absolute;
top: -34px;
transform: rotate(45deg);
width: 30px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.