I am trying to create this as a gradient. https://jsfiddle.net/ojscg6fn/
I have a circle here, how do I create a right triangle gradient to place in the middle of the
circle?
https://jsfiddle.net/79mjuhb2/
.play {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
margin: 0;
padding: 0;
width: 90px;
height: 90px;
cursor: pointer;
/*background:
linear-gradient(green 0 0),
linear-gradient(green 0 0)
blue;*/
background-size:7px 100%,100% 7px;
background-position:center;
background-repeat:no-repeat;
border: 9px solid red;
border-radius: 50%;
transform: rotate(45deg);
}<button class="play" type="button" aria-label="Close"></button>>Solution :
Use a conic-gradient
.play {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
margin: 0;
padding: 0;
width: 90px;
height: 90px;
cursor: pointer;
background: conic-gradient(from -135deg at right,red 90deg,#0000 0) 55% 50%/22px 44px no-repeat;
border: 9px solid red;
border-radius: 50%;
}<button class="play" type="button" aria-label="Close"></button>