[CSS]obrazek w css Opcje

[shreker]

Witam, mam pytanie, czy można w samym css'ie zrobić coś takiego jak na wklejonym obrazku.
https://iv.pl/image/rysunek1.GISaAjB

[trueblue]

Można.
Może to być element z trójkątnymi ramkami i outline: http://apps.eky.hk/css-triangle-generator/
Może też być gradient https://cssgradient.io/
Może też być cały element jako SVG inline w CSS.

[shreker]

mam coś takiego:

[HTML] pobierz, plaintext 
<style type="text/css">
.image
{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 200px 200px 0 0;
    border-color: red transparent transparent transparent;
}
</style>
 
<div class="image"></div>
[HTML] pobierz, plaintext 

a jak utworzyć drugi kolor i obramowanie ?

[trueblue]

Użyć pseudoelementu :before i na nim dodać drugą ramkę.

[shreker]

Obszedłem trochę inaczej

[HTML] pobierz, plaintext 
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-bottom: 50px solid green;
    border-left: 50px solid red;
    border-right: 50px solid green;
    margin: 1px 1px 1px 1px;
[HTML] pobierz, plaintext 

[trueblue]

I bardzo fajnie, bo faktycznie można było nawet wszystkie 4 ramki włączyć na jednym elemencie.
Do tego tylko:
outline: 8px solid #000;

Pamiętaj, że outline nie wpływa na położenie i rozmiary elementu - jest rysowany poza jego boxem.

[shreker]

faktycznie zapomniałem dołożyć ramkę