Как создавать пользовательские формы с классами псевдо в CSS3

я пытаюсь создать элемент, используя Bootstrap, который выглядит, как это изображение Как создавать пользовательские формы с классами псевдо в CSS3

Это снимок экрана, как далеко я пошел

Я никогда не работал на псевдоклассах, и мне очень сложно получить точную форму. Пожалуйста, взгляните на мой код и помогите мне разобраться. Здесь я включил только второй (тот, который находится справа на скриншоте).

HTML

<div class="col-xs-12 col-sm-6"> 
    <div class="clip"> 
      <div class="circle"></div> 
    </div> 

    <div class="pad">   
      <div class="paper"></div>  
    </div> 
</div>

CSS

.clip, .circle{ 
    position: relative; 
} 

.clip::after, .clip::before, circle:after, .circle:before{ 
    display: block; 
    position: absolute; 
    content: ""; 
    z-index: 50; 
} 

.clip:before{ 
    top: 12.5px; 
    left: 15%; 
    width: 70%; 
    border-bottom: solid 50px grey; 
    border-left: solid 150px transparent; 
    border-right: solid 150px transparent; 

} 

.clip:after{ 
    top: 60px; 
    left: 15%; 
    width: 70%; 
    border-bottom: solid 55px grey; 

    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 

    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
} 

.circle:before{ 
    top: 10px; 
    left: 70%; 
    width: 20%; 
    height: 50px; 
    border-radius: 50%; 
    border-right: solid 150px yellow; 
}

источник

2016-07-06 Chandan D Nadig

Почему вы не просто использовать фоновое изображение? Вы можете масштабировать этот фон, чтобы он соответствовал всем разрешениям, и вам не нужно создавать эти фигуры с помощью чистого CSS. Иногда это не лучший выбор, чтобы сделать это с помощью CSS. –

Поскольку изображения занимают больше времени, чтобы загружать более медленные соединения, и главное, что на моей странице это макет, я не хотел этого. Я определенно рассмотрю это как вариант. Тем не менее, можете ли вы предложить решение для CSS, чтобы, по крайней мере, я мог получить больше знаний. –

Это сложная задача сделать с помощью CSS, поэтому я могу вам помочь, но я потеряю так много времени. Тем не менее, серая фигура, которую я не могу сейчас достичь этой формы. Я только могу представить, что форма с серой коробкой с радиусом границы и 45 градусов вращается внутри прозрачной коробки с переполнением, скрывающим границы и снизу. Но чистая форма CSS, которую я не могу сделать с этим. Другая сложная задача - диагональный градиент в середине бумаги. –

, потому что нет SVG тег, я пойду с псевдо & градиентом:

div { 
 
    position:relative; 
 
    float:left; 
 
    margin:60px 60px 80px; 
 
    width:180px; 
 
    height:200px; 
 
    border-radius:15px; 
 
    background:white; 
 
    box-shadow:/* draw inside part of border */0 0 0 20px #159E91, inset -1px -1px 1px; 
 
} 
 
div:before {/*to draw outside part of border with same radius inside/out */ 
 
    z-index:-1; 
 
    border-radius:20px; 
 
    content:''; 
 
    border: 20px solid #159E91; 
 
    position:absolute; 
 
    top:-30px; 
 
    left:-30px; 
 
    right:-30px; 
 
    bottom:-30px; 
 
    box-shadow:0 -2px 2px rgba(30, 162, 149, 0.2), 0 0 2px white, 0 5px 5px -3px rgba(0,0,0,0.5) 
 
} 
 
div:after {/* draw gradient underneath clipper */ 
 
    content:''; 
 
    position:absolute; 
 
    top:0; 
 
    border-radius: 0 15px 0 0; 
 
    left:26px; 
 
    width:152px; 
 
    height:150px; 
 
    background: 
 
    linear-gradient(45deg, white 40%, rgba(255,255,255,0) 40%),/* mask*/ 
 
    linear-gradient(-45deg, white , transparent 70%),/* mask*/ 
 
    linear-gradient(to right , rgba(0,0,0,0.25) , rgba(0,0,0,0.15)),transparent ; 
 
} 
 
.clipper {/* hold clipper shape actually */ 
 
    display:block; 
 
    width:128px; 
 
    height:80px; 
 
    margin: -52px auto 30px; 
 
    position:relative; 
 
    z-index:1; 
 
    overflow:hidden; 
 
} 
 
.clipper b {/* show the clipper shape */ 
 
    border-radius:35px; 
 
    position:absolute; 
 
    height:150%; 
 
    width:100%; 
 
    box-shadow: 0 0 1px 1px gray; 
 
    left:50%; 
 
    top:-12px; 
 
    transform-origin:0 0; 
 
    transform:rotate(45deg); 
 
    overflow:hidden; 
 
    } 
 
.clipper b:before {/* draw the hoe and paint around it */ 
 
    content:''; 
 
    display:block; 
 
    border-radius:100%; 
 
    height:29px; 
 
    width:29px; 
 
    margin:20px; 
 
    box-shadow:inset -1px -1px 1px gray, 0 0 0 100px #3B3B3B, inset 1px 1px 2px rgba(0,0,0,0.5); 
 
} 
 

 
/* to match fake picture's text */ 
 
.clipper ~ span { 
 
    display:block; 
 
    background:#353535; 
 
    margin:10px 58px; 
 
    padding:5px; 
 
    position:relative; 
 
    z-index:1; 
 
} 
 
.clipper ~ span:last-of-type { 
 
    display:block; 
 
    background:#353535; 
 
    margin:10px 85px 10px 58px; 
 
}

<div> 
 
    <span class="clipper"><b></b></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div>

, но это действительно много CSS для просто формы, где изображение или SVG будет отлично подходит для дизайна.

Вы можете играть с ним здесь: http://codepen.io/gc-nomade/pen/rLYYZx

источник

2016-07-12 19:47:57

ВЫ ЖЕСТКОЙ –

Я сделал это некоторые изменения в дизайне. Теперь, когда я так далеко, я хочу придерживаться CSS. Скрипт: http://jsfiddle.net/chandannadig/3kjdo9rr/10/. Можете ли вы помочь мне сделать отзыв клипера? –

https://jsfiddle.net/ahe128/esmrLzuv/5/

я сделал что-то, но это действительно тяжелая работа, я буду стараться закончить это :)

.clip, 
.circle { 
    position: relative; 
} 

.clip::after, 
.clip::before, 
circle:after, 
.circle:before { 
    display: block; 
    position: absolute; 
    content: ""; 
    z-index: 50; 
} 

.clip:before { 
    top: 1rem; 
    left: 10%; 
    width: 20%; 
    border-bottom: solid 50px grey; 
    border-left: solid 150px transparent; 
    border-right: solid 150px transparent; 
} 

.clip:after { 
    top: 4.65rem; 
    left: 10%; 
    right:10%; 
    width: 82%; 
    border-bottom: solid 4.3rem grey; 
    border-top-left-radius: 0.8rem; 
    border-top-right-radius: 0.8rem; 
    border-bottom-left-radius: 0.4rem; 
    border-bottom-right-radius: 0.4rem; 
} 

.circle:before { 
    top: 0.78rem; 
    height: 1px; 
    width:1px; 
    border-radius: 50%; 
    border: solid 25px white; 
    z-index:100; 
    left:47% 
}

источник

2016-07-07 13:37:00 ahe

Спасибо, пожалуйста, взгляните на мой ответ и скрипку. По какой-то причине код работает только на моих браузерах, но не на скрипке. –

Если у вас есть проблемы с размером, вы можете попробовать следующее решение: это функция начальной загрузки hidden-xs или hidden-sm exc. Например, вы делаете две фигуры и одну из них (для lg, sm md) класс «col-md-12 hidden-xs», а другой класс (для xs) - «col-xs-12 hidden-sm hidden - lg hidden -... " Я использовал его раньше на моем proje, и это хорошее решение для проблемы с размером иногда настройка размера бутстрапа не работает с нашим дизайном, и я думаю, что это решение является лучшим :) – ahe

И, наконец, я получил работу (кроме диагонального градиента). Но он еще не реагирует. Моя цель состоит в том, чтобы сохранить каждый дизайн Clipboard неповрежденным и уложить их один ниже другого на маленьких экранах. Может кто-нибудь, пожалуйста, укажите, где я этого не хватает!

Кроме того, если есть лучший способ сделать это в Pure CSS, то я бы хотел его увидеть.

Fiddle: https://jsfiddle.net/chandannadig/esmrLzuv/7/

/*Clip*/ 
.clip, .circle{ 
    position: relative; 
} 

.clip::after, .clip::before, circle:after, .circle:before{ 
    display: block; 
    position: absolute; 
    content: ""; 
} 

.clip:before{ 
    z-index: 50; 
    top: 1rem; 
    left: 6.958rem; 
    width: 29rem; 
    border-bottom: solid 4rem grey; 
    border-left: solid 11.5rem transparent; 
    border-right: solid 11.5rem transparent; 

} 

.clip:after{ 
    top: 4.7rem; 
    left: 6.958rem; 
    width: 29rem; 
    z-index: 50; 
    border-bottom: solid 4rem grey; 

    border-top-left-radius: 0.8rem; 
    border-top-right-radius: 0.8rem; 

    border-bottom-left-radius: 0.5rem; 
    border-bottom-right-radius: 0.5rem; 
} 

.circle{ 
    position: absolute; 
    z-index: 60; 
    top: 0.4rem; 
    left: 15.6rem; 
    width: 12rem; 
    height: 8rem; 
    background: grey; 
    border-radius: 50%; 
} 

.circle::before{ 
    z-index: 60; 
    top: 1rem; 
    left: 4.2rem; 
    width: 3.5rem; 
    height: 3.5rem; 
    background: white; 
    border-radius: 50%; 
} 
/*End of Clip*/

источник

2016-07-07 14:14:30

Как создавать пользовательские формы с классами псевдо в CSS3

ответ

Смежные вопросы