After searching for a while for a solution for this I've e 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.
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
.
How can I achieve this via CSS? A JS/Jquery solution would work as well.
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;
}
}
}
After searching for a while for a solution for this I've e 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.
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
.
How can I achieve this via CSS? A JS/Jquery solution would work as well.
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;
}
}
}
Share
Improve this question
edited Jan 3, 2015 at 12:10
Chrillewoodz
asked Jan 3, 2015 at 11:02
ChrillewoodzChrillewoodz
28.4k23 gold badges99 silver badges186 bronze badges
9
- How is Your border (lightblue) inside background (darkgrey)? – Bogdan Kuštan Commented Jan 3, 2015 at 11:11
- @BogdanKuštan It's not. I made the background light blue so you could see the problem since the background is dark grey. – Chrillewoodz Commented Jan 3, 2015 at 11:13
-
1
This isn't possible through
border-radius
just yet, but a proposed enhancement to this property will allow you to do exactly what you're looking for (search for "css corner shape"). In the meantime, applying this effect to a border will be somewhat nontrivial. There are a number of questions about chamfering a borderless background this way, with a solution demonstrated in Bogdan Kuštan's answer, but I'm not sure if any exist for borders. – BoltClock Commented Jan 3, 2015 at 11:24 - @Chrillewoodz: I see you have already accepted an answer. Here is another approach using pseudo-elements and border-image (lesser browser support). I will add as answer if you wish. – Harry Commented Jan 3, 2015 at 12:34
- @Harry I tried modifying your fiddle but it doesn't appear to be working unless you have a large border. Correct? – Chrillewoodz Commented Jan 3, 2015 at 12:38
2 Answers
Reset to default 5If 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);
}
UPDATE:
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);
}
How about achieving that like this? without border-radius
property
WORKING FIDDLE
Also have look at The Shapes of CSS on css-tricks.
HTML
<div class="square">
<div class="cut-fold"></div>
</div>
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;
}