All geek questions in one place

Opposite radius of the lateral border

I don’t know if this exists, but I create for myself a small web constructor where I add a new HTML element, giving it the attributes I want and their values. After I made some CSS changes using Javascript and for border-radius, I used this:

function borderRadius(){
    var dr = document.getElementById("displayColor");
    var rv = document.getElementById("radiusValue");
    var tl = document.getElementById("tl").value;
    var tr = document.getElementById("tr").value;
    var bl = document.getElementById("bl").value;
    var br = document.getElementById("br").value;
    rv.innerHTML = 'Top-Left: '+tl+'%; Top-Right: '+tr+'%; Bottom-Left: '+bl+'%; Bottom-Right: '+br+'%;';
    dr.style.borderTopLeftRadius = tl+'%';
    dr.style.borderTopRightRadius = tr+'%';
    dr.style.borderBottomLeftRadius = bl+'%';
    dr.style.borderBottomRightRadius = br+'%';  
}

This code is not important and it looks like <w640 "..

Now my question is: can I make CSS code something like

<w640 "

not create additional elements around?

UPDATE:

As GabyakaG.Petrioli said, this could be a solution, and I'm halfway with him:

.round {
    background:
        radial-gradient(circle at 0 50%, rgba(204,0,0,0) 40%, #c00 10%),
        radial-gradient(circle at 100% 50%, rgba(204,0,0,0) 40%, #c00 10%),
        radial-gradient(circle at 100%, rgba(204,0,0,0) 40%, #c00 10%),
        radial-gradient(circle at 0, rgba(204,0,0,0) 40%, #c00 10%);

    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    
    padding: 10%;
    padding-left: 22%;
    padding-right: 22%;
}
<div class="round">By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).</div>
Run codeHide result

Also here I found the answer and solution, but still I have some fields or something:

*{margin: 0; outline:0; border: 0;}
.round {
    background:
        radial-gradient(circle at 0 100%, rgba(204,0,0,0) 70%, #c00 71%),
        radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 70%, #c00 71%),
        radial-gradient(circle at 100% 0, rgba(204,0,0,0) 70%, #c00 71%),
        radial-gradient(circle at 0 0, rgba(204,0,0,0) 70%, #c00 71%);

    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
   width: 300px;
   height: 300px;
    padding: 10%;
    transform: rotate(45deg);
}
p{
  transform: rotate(-45deg);
  width: 100px;
  margin: 100px;
}
<div class="round"><p>

By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case,</p></div>
Run codeHide result
+4
source share
1

, CSS . . radial-gradient , , , , , .

:

. , . ( ), radial-gradient , , . , , :hover, , - , , /. , ( ).

div {
  width: 300px;
  height: 300px;
}
.radial-grad {
  background: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 70%, #c00 71%);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  transform: rotate(45deg);
  backface-visibility: hidden;
}

/* just for demo */

div {
  transition: all 1s ease;
}
div:hover {
  width: 350px;
  height: 350px;
}
<div class='radial-grad'></div>
Hide result

SVG:

SVG . path . SVG (), , , , .. . radial-gradient, .

( , Q), / . d path JS , HTML.

, SVG (). HTML, , SVG. - - .

svg {
  height: 300px;
  width: 300px;
}

/* just for demo */

svg {
  transition: all 1s;
}
svg:hover {
  height: 200px;
  width: 250px;
}
<svg viewBox='0 0 200 200'>
  <defs>
    <pattern id='bg' width='200' height='200' patternUnits='userSpaceOnUse'>
      <image xlink:href='https://placeimg.com/200/200/nature' height='200' width='200' />
    </pattern>
  </defs>
  <path d='M0,0 Q100,60 200,0 Q140,100 200,200 Q100,140 0,200 Q60,100 0,0z' fill='url(#bg)'/>
</svg>
Hide result

:

SVG, , , , .

CSS ( SVG) , . , - SVG. , Firefox SVG (, url(#id)). IE - clip-path , .

, , , :hover, .

, .

div {
  height: 300px;
  width: 300px;
  background-image: url(https://placeimg.com/200/200/nature);
}
.clip-path {
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}

/* just for demo */

div {
  transition: all 1s ease;
}
div:hover {
  height: 350px;
  width: 325px;
}
<svg width='0' height='0'>
  <defs>
    <clipPath id='clipper' clipPathUnits='objectBoundingBox'>
      <path d='M0,0 Q0.5,0.3 1,0 Q0.7,0.5 1,1 Q0.5,0.7 0,1 Q0.3,0.5 0,0z' />
    </clipPath>
  </defs>
</svg>
<div class='clip-path'></div>
Hide result

:

WebKit , . , - , .

radial-gradient, , radial-gradient, , , . , , , .

, :hover , , , .

radial-gradient, , .

div {
  height: 300px;
  width: 300px;
  background-image: url(https://placeimg.com/200/200/nature);
}
.mask {
  -webkit-mask-image: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 70%, #c00 71%);
  -webkit-mask-position: bottom left, bottom right, top right, top left;
  -webkit-mask-size: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  transform: rotate(45deg);
  backface-visibility: hidden;
}

/* just for demo */

div {
  transition: all 1s ease;
}
div:hover {
  height: 350px;
  width: 350px;
}
<div class='mask'></div>
Hide result

:

, , - . , :hover, , ( , ), .

2 , .

div {
  position: relative;
  height: 300px;
  width: 300px;
  background: #c00;
}
div:before {
  position: absolute;
  content: '';
  height: 50%;
  width: 110%;
  top: -35%;
  left: -5%;
  background: white;
  border-radius: 50%;
  box-shadow: 0px 360px 0px 0px white;
}
div:after {
  position: absolute;
  content: '';
  width: 50%;
  height: 110%;
  left: -35%;
  top: -5%;
  background: white;
  border-radius: 50%;
  box-shadow: 360px 0px 0px 0px white;
}
<div></div>
Hide result
+1

Source: https://habr.com/ru/post/1667305/

More articles:


All Articles