Develop Reference

Create inverted curved corners in CSS [duplicate]

I have a css code:
-moz-border-radius-topleft:50px;
I get the result:
Is there any possibilities to give like this:

Just to update this, it seems you can in multiple ways.
Lea Verou posted a solution
Here is mine using border-image
Using border image
html
<div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div>
css
div {
width: 200px;
border-width: 55px;
-moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
-webkit-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
-o-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
margin: 50px auto;
}
Using radial gradient
Lea Verou's solution
html
<div class="inner-round"></div>
css
.inner-round {
background-image:
radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}

In modern browsers, you can use mask-image:
#aux-container {
width: 100px;
height: 100px;
background: #f00;
-webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}
<div id="aux-container"></div>
http://jsbin.com/eViJexO/1/
Additionally, take a look at http://www.html5rocks.com/en/tutorials/masking/adobe/, which describes how to achieve similar result using mask-box-image.

You can also use and inline svg with a path element:
body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}
<svg viewbox="0 0 10 10">
<path d="M9 1 V9 H1 V3 Q3 3 3 1" fill="#fff"/>
</svg>
In this example, I use a cubic bezier curve for the inverted round edge.
With this approach, you can also fill the shape with an image or gradient:
body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}
<svg viewbox="0 0 10 6.7">
<defs>
<clipPath id="clip">
<path d="M9 1 V6.7 H1 V3 Q3 3 3 1" fill="#fff"/>
</clipPath>
</defs>
<image xlink:href="http://i.imgur.com/qi5FGET.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>

This can be done with a radial gradient.
div {
width: 20vw;
height: 20vw;
background: radial-gradient(circle at top left,transparent 4vw, darkblue 4.1vw);
}
<div></div>
Just for fun, additional inverted corners can be added by defining multiple backgrounds - one for each corner:
div {
width: 40vw;
height: 40vw;
position: relative;
background-color: darkblue;
--circle: radial-gradient(circle,white 8vw, darkblue 8.1vw);
}
div:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: var(--circle), var(--circle), var(--circle), var(--circle);
background-size: 18vw 18vw;
background-position: -40% -40%, 140% -40%, -40% 140%, 140% 140%;
background-repeat: no-repeat;
}
<div></div>

Update: There are a plethora of options available now. Check out one of the other answers.
Original answer:
Unfortunately, there is currently not a solution based on official or implemented CSS Specs :(
However, as other people have added, there are possible solutions (or cheats?) you can do to achieve the same effect using JS libraries or complex HTML/CSS implementations. I came across this issue whilst looking for a way to make even more complex corners than the OP without using images.
I have filed a bug (Feature Request) over at the webkit site - as there does not appear to be one filed already.
Bug 62458 - Feature Request: Inverse rounded corners

For a plain background-color, you actually can, using pseudo element and box shadow to draw background-color instead, and it will not hide backgrounds of parent's container, you will actually see them through.
What you need is a browser that understands :before/:after and box-shadow :) ...
For IE8 , you can draw hudge borders instead shadows. http://codepen.io/anon/pen/fFgDo
box-shadow approach : http://codepen.io/anon/pen/FwLnd
div {
margin:2em; /* keep it away from sides to see result */
padding:2em;/* for test to size it when empty */
position:relative; /* reference to set pseudo element where you wish */
overflow:hidden;/* you do not want the box-shadow all over the page */
}
div:before {
content:'';
position:absolute;
width:80px;
height:80px;
top:-40px;
left:-40px;
border-radius:100%;
box-shadow:0 0 0 2000px #1D005D;/* here draw the shadow inside its parent , maybe z-index will be required for content */
}
pseudo element can take any shape, and transform via css and set any where in its element to draw kind of holes through : examples : http://codepen.io/gc-nomade/pen/nKAka

I made an online generator to easily get the code of any combination you want: https://css-generators.com/custom-corners/
A few examples:
.one {
--mask: radial-gradient(40px at 40px 40px,#0000 98%,#000) -40px -40px;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.two {
--mask:
radial-gradient(40px at 0 0,#0000 98%,#000) 0/51% 100% no-repeat,
radial-gradient(40px at 100% 100%,#0000 98%,#000) 100%/51% 100% no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.three {
--mask:
radial-gradient(60px at 60px 60px,#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000) -60px -60px,
linear-gradient(90deg,#000 20px,#0000 0) -10px 50% /100% calc(100% - 120px + 10px) repeat-x,
linear-gradient( #000 20px,#0000 0) 50% -10px/calc(100% - 120px + 10px) 100% repeat-y;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.four {
--mask: radial-gradient(60px at 0 0,#0000 98%,#000);
-webkit-mask: var(--mask);
mask: var(--mask);
}
.five {
--mask:
radial-gradient(60px at 100% 0,#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000),
conic-gradient(from 90deg at 10px 10px,#0000 25%,#000 0) 0 0/calc(100% - 60px + 10px) 100% repeat-y,
conic-gradient(at bottom 10px right 10px,#000 75%,#0000 0) 0 100%/100% calc(100% - 60px + 10px) repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.box {
width: 150px;
aspect-ratio:1;
display:inline-block;
background:linear-gradient(red,blue);
}
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>

There are ways you could solve this issue by using just CSS - however it would depend on the colour of your background (if solid its easier) if you have a pattern for background it might be slightly more complex.
I cover a basic example here of how to make an Inverse Border Radius in CSS (here). This uses a trick with the size of Border to use the inside, you might have to do some positioning to get it to work properly however as you can see its possible. Especially if you specify a background-color for each span.
If you want all 4 corners you would have to add a separate class for each span inside your div, and each class would simulate a corner, top left, top right etc.

No.
If you have solid background you can probably use css to create the bite.
Otherwise, there isn't anything special you can do beyong using PNGs, much like you'd create round corners before border-radius.

actually there's one way, like this:
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>
but as #Domenic says you'll need a solid background, otherwise you'll get this:
<div style=" background-color:#666">
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>

Responsive Skewed Div with background image

I am attempting to make a page where the screen is split in half with two images from the bottom right corner to the top left corner
I have done this in CSS using transform: skewY( x amount deg);
I can then change this with javascript when the page loads by calculating the degree needed via trigonometry like so
var hlc = document.getElementById('homeleftside');
var hlch = hlc.clientHeight;
var hlcw = hlc.clientWidth;
var hlct = Math.atan(hlch/hlcw);
var hlca = hlct * 180 / Math.PI;
and I can do this via javascript every time the page is resized,
but to make this in CSS I have made these classes below and was wondering if there is a better alternative to a responsive degree amount depending on the page size due to editing the pseudo:: after element.
.homeleftside::after {
transform-origin: top left;
transform: skewY(-29deg);
content: '';
height: 100%;
width: 100%;
background: url("graphics/architecture.jpg");
color: #fff;
position:absolute;
top: 0px;
left: 0px;
z-index: 1;
overflow: hidden;
}
.homeleftside {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
transform-origin: top left;
transform: skewY(29deg);
}

As far as I know, your only posibility is with a mask-image.
Support is not fully, but it gives an easy way to achieve it.
Note that the direction "top left" (and similars) for a gradient will get you always the diagonal of the element
.test {
background-image: linear-gradient(red, green);
-webkit-mask-image: linear-gradient(to top right, black 50%, transparent 50%);
mask-image: linear-gradient(to top right, black 50%, transparent 50%);
}
#test1 {
width: 300px;
height: 200px;
}
#test2 {
width: 200px;
height: 200px;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>

You can easily achieve this using clip-path
body {
margin:0;
height:100vh;
background:url(https://picsum.photos/id/10/800/800) center/cover;
}
body:before {
content:"";
display:block;
height:100%;
background:url(https://picsum.photos/id/18/800/800) center/cover;
-webkit-clip-path:polygon(0 0,0 100%,100% 100%);
clip-path:polygon(0 0,0 100%,100% 100%);
}

How to diagonally divide a square div into 4 clickable parts?

This is how to diagonally "divide" a square into 4 parts:
div {
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid yellow;
}
<div>
</div>
(result)
I want to attach an event to each colored area - but of course you can't attach an event to a border. How should I do?

Here is one way to do it. Nested DIVs. I used wrapper with a a grid to lay them in the 2x2 pattern, then translated and rotated the wrapper. Clipped using the outermost div. Each one is easy to use the onclick for, and you don't need to do extra logic. Just a lot more effort to setup.
I've also got this set up so that you can easily change the size of the squares. However, this definitely won't work in IE, but I don't think we really need to worry about that.
Working codepen
document.querySelector(".red").onclick = () => alert("red");
document.querySelector(".blue").onclick = () => alert("blue");
document.querySelector(".yellow").onclick = () => alert("yellow");
document.querySelector(".green").onclick = () => alert("green");
.clip {
--size: 200px;
height: var(--size);
width: var(--size);
overflow-x: hidden;
overflow-y: hidden;
}
.rotate {
height: calc(var(--size) * 1.5);
width: calc(var(--size) * 1.5);
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
transform: translate(-50%, -50%) translate(calc(var(--size) * 0.5), calc(var(--size) * 0.5)) rotate(45deg) ;
}
.red {
background: red;
}
.blue {
background: blue;
}
.yellow {
background: yellow;
}
.green {
background: green;
}
<div class="clip">
<div class="rotate">
<div class="red"> </div>
<div class="blue"> </div>
<div class="yellow"> </div>
<div class="green"> </div>
</div>
</div>

If you want to pursue a single div/different logic depending on location, this might help.
I just wrote this in the console of this page:
document.body.addEventListener("click",(e)=>console.log(e))
And clicked, in this order, on these portions: "yellow", "red", "blue", "green" of your image. ( I held ctrl while clicking, so that it would open the image in new tab and this page would persist)
The resulting events (4 loggeed, ofc) had a path attribute that said on which element I clicked (in this case, principal one was img), and the offsetX & offsetY relative to this element
The relation was:
{
"yellow": {offsetX: 18, offsetY: 59},
"red": {offsetX: 59, offsetY: 25},
"blue": {offsetX: 85, offsetY 46},
"green": {offsetX: 61, offsetY: 78},
}
So yeah, you could use, from the MouseEvent:
offsetX
The offsetX read-only property of the MouseEvent interface provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.
offsetY
The offsetY read-only property of the MouseEvent interface provides the offset in the Y coordinate of the mouse pointer between that event and the padding edge of the target node.
And determine where user clicked.

You can use clip path to make triangles and use some positioning to get them in the correct spots.
document.querySelector('.sq-tri').addEventListener("click", (evt) => {
console.log(evt.target.getAttribute('data-location'))
})
.sq-tri {
display: relative;
width: 5em;
height: 5em;
}
.tri {
position: absolute;
}
.tri-up,
.tri-down {
width: 5em;
height: 2.5em;
}
.tri-left,
.tri-right {
width: 2.5em;
height: 5em;
}
.tri:hover {
background-color: lime;
cursor: pointer;
}
.tri-up {
margin-top: 2.5em;
background-color: yellow;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.tri-down {
background-color: red;
clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}
.tri-left {
background-color: green;
margin-left: 2.5em;
clip-path: polygon(100% 100%, 100% 0, 0 50%);
}
.tri-right {
background-color: blue;
clip-path: polygon(0 100%, 0 0, 100% 50%);
}
<div class="sq-tri">
<div class="tri tri-down" data-location="top"></div>
<div class="tri tri-right" data-location="left"></div>
<div class="tri tri-left" data-location="right"></div>
<div class="tri tri-up" data-location="bottom"></div>
</div>

Use an SVG as detailed in this answer
Note: As each of the elements inside the SVG has an ID, you should be able to target them with JS/Jquery.
svg {
display: block;
width: 200px;
height: 200px;
margin: 25px auto;
border: 1px solid grey;
stroke: #006600;
}
#buttons polygon:hover {
fill: orange;
}
#top {
fill: #cc3333;
}
#right {
fill: #663399;
}
#left {
fill: #bada55;
}
<svg viewbox="0 0 100 100">
<g id="buttons">
<polygon id="top" points="0,0 100,0 50,50" />
<polygon id="right" points="100,0 50,50 75,75 100,100" />
<polygon id="bottom" points="0,100 50,50 75,75 100,100" />
<polygon id="left" points="0,0 25,25 50,50 0,100" />
</g>
</svg>

Making border-image work with gradients

I'm working on a webapp that uses react.js and sass for styles (so all my style files are .scss). I have a textbox with the current style:
input[type=text] {
text-align: center;
font: inherit;
border: 6px solid #999999;
padding: 5px 5px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 223px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
}
At some point, my app wants to change the border colour. This is what I have for that:
var borderStyle;
if (gradient) {
borderStyle = {
'borderImage': '-webkit-linear-gradient(left, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
};
}
Later, the input component:
<input type="text" style={borderStyle} onChange={this.handleChange} />
Currently what I see is a white border with a tiny image of the red-blue gradient in each corner of the border. I've tried using borderColor, which doesn't work with gradients at all, apparently. Am I missing something obvious, or is it not possible to do a simple border gradient?
The desired result is a left-to-right gradient (so the left border is entirely blue, the right is entirely red, and the top and bottom borders feature the blue-to-red transition).
In response to Harry's answer, I changed to the following code:
if (gradient) {
borderStyle = {
borderImage: 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
borderImageSlice: 1
};
}
as specified in the react docs for inline styles.
However when I inspect the element, the borderImageSlice property I've defined is missing; only the borderImage one is there, and I still only have tiny gradients in the corners of the border.

You need to add a border-image-slice property also while applying the border. Doing this would give the exact output as you need.
I have added it via CSS itself in the below snippet (without the JS) but you should be able to adapt it :)
input[type=text] {
text-align: center;
font: inherit;
border: 6px solid #999999;
padding: 5px 5px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 223px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
border-image: linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%);
border-image-slice: 1;
}
<input type="text" />
Note: I have also modified the gradient syntax to use the standard one so that it works in all browsers that support border-image property.
Below is a snippet which applies the border image when the text in the input box is changed.
var ip = document.getElementById("inp");
ip.addEventListener("change", function() {
this.style.borderImage = 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)';
this.style.borderImageSlice = '1';
});
input[type=text] {
text-align: center;
font: inherit;
border: 6px solid #999999;
padding: 5px 5px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 223px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
}
<input type="text" id="inp" />
It seems like ReactJS by default adds px as units to all numbers that are passed for inline styles and because of this the border-image-slice: 1 is wrongly getting set as border-image-slice: 1px. As this property is a unitless property in CSS, it is not getting applied properly. The solution is to wrap this value within quotes and also add a semi-colon within the quotes (like in the below code sample):
var borderStyle = {
borderImage: 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
borderImageSlice: '1;' // note the quotes and the semi-colon.
};
Big credits for finding out this problem goes to Henrik Andersson.
JSBin Demo with ReactJS

I managed to fix such problem by adding 1 / 1 / 0 stretch by myself to the inline-style so it looks like this:
var borderImage = `linear-gradient(to right, #1A80AC 0%, #1A80AC ${position.x / 3}%,
#8798AD ${ position.x / 3 }%, #8798AD 100%) 1 / 1 / 0 stretch`

weird bug with ranges over canvases

This jsfiddle:http://jsfiddle.net/SDR2W/3/
Anyway, the sliders have a system so the top shade will never be darker than the bottom. But when you drag any of the ranges upward, at a value of 10, the sliders act weird, and i don't understand why. (the ranges are hidden on the side of the canvases) wondrin if any of you see the problem?
Thanks
<input type="range" class="vs1 vs" min="0" max="45" style="left:-89px;top:-12px" id="vs1" />
<input type="range" class="vs2 vs" min="0" max="45" style="right:-89px;top:-12px" id="vs2" />
<style>
input {
font-weight:bold;
font-family:arial;
outline:none;
}
input[type=range].vs {
-webkit-appearance: none;
background: none;
width: 200px;
height:28px;
-webkit-transform:rotate(90deg);
margin-top: 97px;
z-index: 10;
position: absolute;
border:1px solid rgba(0, 0, 0, 0);
opacity:0.4;
transition-duration: 1s;
}
input[type="range"].vs1::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: black;
width: 5px;
height: 15px;
border-top-right-radius:2em;
border-top-left-radius:2em;
position: relative;
top: 6px;
}
input[type="range"].vs2::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: black;
width: 5px;
height: 15px;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
position: relative;
bottom: 7px;
}
input[type=range]:hover.vs {
background: -webkit-gradient(linear, left top, right top, color-stop(100%, #ffcb93), color-stop(73%, #ffd8af), color-stop(0%, #ffffff));
border:1px solid black;
opacity:1;
}
input[type=range]:active.vs {
background: -webkit-gradient(linear, left top, right top, color-stop(100%, #ffcb93), color-stop(73%, #ffd8af), color-stop(0%, #ffffff));
border:1px solid black;
opacity:1;
}
</style>

You had this tagged as jQuery, so I have reduced & simplified it by somewhat actually using jQuery:
if (~~$('#vs1').val() > ~~$('#vs2').val()) {
if (qwas == 1) $('#vs2').val($('#vs1').val())
if (qwas == 2) $('#vs1').val($('#vs2').val())
}
jSFiddle: http://jsfiddle.net/TrueBlueAussie/ZYX8Y/3/
Note: ~~ converts a value to an integer (including strings). Much simpler & faster than parseInt()
Another note: At first I managed to easily break your code as there are no braces on the nested ifs... really bad practice for code maintenance.

You shouldn't compare strings directly. The value property gives you strings.
So "1" and "10" don't compare as you think.
To solve your problem use:
parseInt(obj.value, 10)
where obj is the DOM element you get with document.getElementById().
Use this everywhere, in the if() and in the get and set of your assignments.