-4
, пожалуйста, я хочу создать что-то подобное с помощью CSS.CSS пользовательская форма
Просто хочу использовать только CSS, чтобы создать эту пользовательскую форму с радиусом границы. Любые идеи, пожалуйста?
A
ответ
0
Это форма, которая вам нужна, вам нужно сделать некоторые трюки с границами и преобразовать, также вам нужно использовать: после и: перед селекторами для создания таких форм.
#diamond-shield {
\t width: 0;
\t height: 40;
\t border: 50px solid transparent;
\t border-bottom: 50px solid orange;
\t position: relative;
\t top: -10px;
left: 250px;
transform-origin: 0% 0%;
transform: rotate(82deg)
}
#diamond-shield:after {
\t content: '';
\t position: absolute;
\t left: -50px; top: 50px;
\t width: 0;
\t height: 0;
\t border: 50px solid transparent;
\t border-top: 370px solid orange;
}
#chevron {
position: relative;
text-align: center;
padding: 8px;
top: -9px;
margin-bottom: 6px;
left:164px;
height: 0px;
width: 60px;
transform-origin: 0% 0%;
transform: rotate(-98deg);
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: white;
transform: skew(0deg, 44deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: white;
transform: skew(0deg, -44deg);
}<div id="diamond-shield"></div>
<div id="chevron"></div>Также Вы можете посмотреть некоторые примеры здесь: https://css-tricks.com/examples/ShapesOfCSS/
+0
Ничего себе, спасибо вам, очень муха @Pablo Máximo – sanaa
@sanna - Добро пожаловать на Stack Overflow, пожалуйста, прочитайте, как спросить - http://stackoverflow.com/help/how- спрашивать. Это не служба написания кода, вы должны показать, что вы пробовали до сих пор. – micstr
Изображение в этом сообщении продолжает меняться ... – Jer
@sanaa Я думаю, вы смущены и не знаете, что вы хотите спросить? –