Контур 45 градусов в CSS [дубликат] ⇐ CSS

[Anonymous]

Первое изображение — это то, чего я пытаюсь достичь, второе — то, что мне удалось на данный момент.
Я пытаюсь получить это предупреждающее сообщение, используя только CSS, без импорта изображения1
2
Я остановился на верхней границе с чередующимися цветами под углом 45 градусов. Не могу понять, как повернуть угол на 45 градусов.
Это то, что у меня пока получилось.

.alert {
position: relative;
top: 0;
left: 0;
width: auto;
height: auto;
padding: 30px;
margin-top: 250px;
margin-left: 350px;
margin-right: 350px;

border-radius: 5px;
font-family: sans-serif;
font-weight: 400;
background-color: #EEE;
border: 3px solid black;
box-shadow: 5px 15px 15px 15px silver;
}

.button {

padding: 5px 8px 5px 20px;

line-height: 1.2;
border-radius: 1px;
font-family: sans-serif;
font-weight: 400;
background-color: white;
border: 1px solid black;
color: black;
text-decoration: none;

}

.boxborder-me {
box-shadow: 0 0 0 5px yellow;
outline: dashed 5px brown;
height: 100px;
}

.alert h3 {
text-align: left;
font-size: 16px;
}
.checkmark {
display: inline-block;
font-weight: bold;
color: green;
padding-right: 5px;
}

.warning {
display: inline-block;
font-weight: bold;
color: orange;
font-size: 48px;
padding-right: 5px;
}

.warn,
.warn::before,
.warn::after
{
position: relative;
padding: 0;
margin: 0;
}

.warn {
font-size: 36px;
color: transparent;
}

.warn.warning {
display: inline-block;

top: 0.225em;

width: 1.15em;
height: 1.15em;

overflow: hidden;
border: none;
background-color: transparent;
border-radius: 0.425em;
}

.warn.warning::before {
content: "";
display: block;
top: -0.08em;
left: 0.0em;
position: absolute;
border: transparent 0.6em solid;
border-bottom-color: #F5B041;
border-bottom-width: 1em;
border-top-width: 0;

}

.warn.warning::after {
display: block;
position: absolute;
top: 0.3em;
left: 0;
width: 100%;
padding: 0 1px;
text-align: center;
font-family: "Garamond";
content: "!";
font-size: 0.65em;
font-weight: bold;
color: white;
}

.child {
border: 1px solid blue;
padding: 0px 0px 0px 0;
valign: top;
}

.alert-message {
padding: 0px 0px 10px 0;
}
.alert {
position: relative;
top: 0;
left: 0;
width: auto;
height: auto;
padding: 30px;

}

.topborder{
box-shadow: 0 0 0 7px yellow;
outline: dashed 6px brown;
padding: 0px;
}

















Alert







Please input details to proceed.









✓
OK









Подробнее здесь: https://stackoverflow.com/questions/783 ... ees-in-css