CSS:グラデーションで作る三角

code:css

div{

margin: 50px auto;

width: 200px;

height: 200px;

background:

linear-gradient(to bottom right, #2196f3 50%, #f44336 50.1%) top left/ 50% 100% no-repeat,

linear-gradient(to bottom left, #4caf50 50%, #ffc107 50.1%) top right / 50% 100% no-repeat;

}

code:css

background:

linear-gradient(to bottom left, transparent 50%, red 51%) no-repeat top left/100% 50%,

linear-gradient(to top left, transparent 50%, red 51%) no-repeat bottom left/100% 50%;

code:css

.triangle-element {

width: 40px;

height: 40px;

background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);

}

https://img.shields.io/badge/CSS-三角を作る-663399.svg?logo=css&style=for-the-badge