创建对角边界半径 [英] Creating diagonal border-radius
问题描述
在为此寻找解决方案一段时间后,我没有想出任何解决方案.我想要做的是在第一个 li
元素的 top left
角上创建一个对角线边框..我尝试使用涉及 background的解决方案代码> 属性,但它并没有给我我想要的东西.此外,它不允许对稍后需要的颜色进行任何操作.
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. Also it doesn't allow any manipulation of the colors which will be needed later on.
浅蓝色应该是被剪掉的边框(而不是被剪掉的背景),深灰色应该是li
的背景.
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
.
我如何通过 CSS 实现这一点?JS/Jquery 解决方案也可以.
How can I achieve this via CSS? A JS/Jquery solution would work as well.
在看到很多对我的问题有误解的答案后,我会澄清一下:
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;
}
}
}
推荐答案
如果我理解问题,你需要类似 this
If I understand question, You need something like this
HTML:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
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);
}
更新:
你不能用 border-radius 来实现.只需使用 css 形状,或者像这样的 hack 更新小提琴
You can't achieve with border-radius. Just using css shapes, or hacks like this updated fiddle
HTML:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
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);
}
这篇关于创建对角边界半径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!