Border (контур) на градиентной границе

Question

Используя это:

background: -moz-linear-gradient(315deg, transparent 10px, black 10px); 

Как я могу создать границу или контур вокруг него без использования border?

Answer 1

Это не является идеальным решением, но мы можем играть с цветными остановками и использовать ::before/::after псевдо-элементы подделать границы следующим образом: (. Префиксы опущены из-за краткости)

div { 
 
    width: 150px; 
 
    height: 50px; 
 
    background: linear-gradient(315deg, transparent 10px, red 10px, red 12px, black 12px); 
 
    border-top: 2px solid red; 
 
    border-left: 2px solid red; 
 
    position: relative; 
 
} 
 

 
div::after, div::before { 
 
    content: ""; 
 
    position: absolute; 
 
    background: red; 
 
} 
 

 
div::before { 
 
    width: 2px; 
 
    top: 0; right: 0; bottom: 14px; 
 
} 
 

 
div::after { 
 
    height: 2px; 
 
    left: 0; right: 14px; bottom: 0; 
 
}

<div></div>

Answer 2

вы можете использовать окно-тень, вставка и или боковик и столько, сколько вы хотите

div { 
 
    background:linear-gradient(45deg,yellow,purple,gray,lime,turquoise); 
 
    box-shadow:0 0 0 5px turquoise; 
 
    padding:2em 3em; 
 
    display:inline-block; 
 
    margin:0.5em; 
 
    } 
 
div:nth-child(even) { 
 
    box-shadow:0 0 0 3px gray, 0 0 0 6px tomato,inset 0 0 0 2px ,inset 0 0 0 5px white;} 
 
div:last-of-type { 
 
    box-shadow: 0 0;}

<div></div><div></div><div></div><div></div><div></div>

или продолжать использовать градиент:

div { 
 
    background: 
 
    linear-gradient(to left, black, black) no-repeat,  
 
    linear-gradient(to top, black, black) no-repeat,  
 
    linear-gradient(to right, black, black) no-repeat,  
 
    linear-gradient(to bottom, black, black) no-repeat, 
 
    linear-gradient(to bottom left, gray,transparent,yellow) purple 
 
    ; 
 
    background-position: left bottom ,right top , left top,left top ; 
 
    background-size: 100% 2px, 2px 100%,100% 2px, 2px 100%, 100%; 
 
    padding:2em 3em; 
 
    float:left; 
 
    margin:0.5em; 
 
    }

<div></div><div></div><div></div><div></div>