Нужна кнопка на которой написано "man". Как сделать такую на css? Если можно с адаптивом, спасибо!)
1 ответ
Вот такой вариант.
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
margin: 0;
}
.button {
display: inline-block;
min-width: 200px;
padding: 12px 0;
text-align: center;
background: #978585;
color: #fff;
position: relative;
cursor: pointer;
--rotate-shadow: 70deg;
}
.button::before,
.button::after {
content: '';
display: block;
position: absolute;
pointer-events: none;
}
.button::before {
width: 100%;
height: 100vh;
background: #303030;
left: 0;
bottom: 100%;
transform-origin: center bottom;
transform:
skewX(var(--rotate-shadow))
translateX(-.5px);
}
.button::after {
width: 100vw;
height: 100%;
background: #000;
top: 0;
right: 100%;
transform-origin: right center;
transform:
skewY(calc(90deg - var(--rotate-shadow)))
translateY(-.5px);
}
<div class="button">MAN</div>