How to Make Diagonal Circle Border Gradient

How to make diagonal circle border gradient?

You can try something like this i have used a pseudo element with -ve z-index

Note: the background is not transparent as i have used a background-color for inner element

.box {  width: 250px;  height: 250px;  position: relative;  margin: auto;  margin: 30px;  border-radius: 50%;  background: #fff;}.box:after {  content: '';  position: absolute;  top: -15px;  bottom: -15px;  right: -15px;  left: -15px;  background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%);  z-index: -1;  border-radius: inherit;}

<div class="box"></div>

CSS3 circle with gradient border?

I would use a pseudo-element (:before) and style it with a gradient background.

(that is because border-image cannot be combined with border-radius)

.greenBlock { background-color: #00c200; border: 3px solid; border-top-color: #00de00; border-right-color: #006900; border-bottom-color: #006900; border-left-color: #00de00; width: 42px; height: 42px; position:relative; z-index:10;}
.greenCore { background-color: #00c200; width: 22px; height: 22px; border-radius: 50%; top:50%; left:50%; margin-left:-11px; /*half width*/ margin-top:-11px; position:relative;}.greenCore:before{ content:''; position:absolute; z-index:-1; border-radius:50%; width:28px; /*22 of greenCore + 3 + 3 for the borders*/ height:28px; left:-3px; top:-3px;     background: -moz-linear-gradient(-45deg, #00ff00 0%, #004900 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00ff00), color-stop(100%,#004900)); background: -webkit-linear-gradient(-45deg, #00ff00 0%,#004900 100%); background: -o-linear-gradient(-45deg, #00ff00 0%,#004900 100%); background: -ms-linear-gradient(-45deg, #00ff00 0%,#004900 100%); background: linear-gradient(135deg, #00ff00 0%,#004900 100%);}

<div class="palette greenBlock" data-code="2">   <div class="greenCore"></div></div>

Radial gradient shows some backlines, gap, spaces or margins

There were two problems in your snippet and when we fix both those that weird gap or line that shows up in the middle would be gone completely..

• Issue 1: You were setting padding: 10% on the element instead of a fixed value. When we give the value as a percentage, we are at the mercy of the UA in terms of rounding-off logic. Each UA has its own rounding-off logic. Take for example the width of the box's containing block is 510px, now 10% comes to 51px. Actual width of an element includes its padding, so here it will become 351px and when UA tries to calculate 50% of the width for background-size, the resulting value will be 175.5px. This is where the catch is. Some browsers round it down to 175px, some like FF has unique logic which rounds down some but rounds up the others, some just round it up etc. When the value is rounded down, the total size of the two background pieces becomes 350px but the actual width of the box is 351px and this 1px difference is the gap that you see.
• Issue 2: When we apply a transform on an element, this sort of gap always comes up. My feeling is that this has something to do with the backface of the element because It goes away when we set backface-visibility to hidden. We have added a detailed explanation at the bottom of the answer. (This is tested in Chrome but should work in all. If it doesn't then there is no solution.)

In the below snippet, I've fixed both these issues and you can see how it works fine. There is also an extra catch with the backface-visibility: hidden. When you set this on a container element, all the text that is within that element get blurred. So, it is better to create the background using a pseudo as it would not affect the display of the p element.

* {  margin: 0;  outline: 0;  border: 0;}.round {  position: relative;  width: 300px;  height: 300px;  padding: 30px;}.round:after {  position: absolute;  content: '';  height: 100%;  width: 100%;  top: 0px;  left: 0px;  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;  z-index: -1;}p {  width: 125px;  margin: 85px;}

<div class="round">  <p>By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case,</p></div>

Creating diagonal border-radius

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);
}

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);
}

CSS: Circle with half one color and the other half another color?

A linear-gradient will do that, and use border-radius to make it a circle.

div {  width: 50vw;  height: 50vw;  background: linear-gradient( -45deg, blue, blue 49%, white 49%, white 51%, red 51% );   border-radius: 50%;}

<div></div>

How to draw a circle sector in CSS?

CSS and Multiple Background Gradients

Rather than trying to draw the green portion, you could draw the white portions instead:

pie {
    border-radius: 50%;
    background-color: green;
}

.ten {
    background-image:
        /* 10% = 126deg = 90 + ( 360 * .1 ) */
        linear-gradient(126deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

pie {
  width: 5em;
  height: 5em;
  display: block;
  border-radius: 50%;
  background-color: green;
  border: 2px solid green;
  float: left;
  margin: 1em;
}

.ten {
  background-image: linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.twentyfive {
  background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.fifty {
  background-image: linear-gradient(90deg, white 50%, transparent 50%);
}

/* Slices greater than 50% require first gradient
   to be transparent -> green */

.seventyfive {
  background-image: linear-gradient(180deg, transparent 50%, green 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.onehundred {
  background-image: none;
}

<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>

---

Related Topics