как сверстать элемент с углами и дать ему деть?

MF
На сайте с 25.10.2009
Offline
75
388

Друзья, всем привет.

Я учусь верстать, и вот не могу разобраться, как сверстать такой элемент

на десктопе 4 блока в ряд.

на мобиле 4 блока в столбик.

как бы проблемы с вёрсткой блока нет, как и с меди запросом, чтобы на мобильнике их сделать в ряд.

но как сверстать этот угол? да еще так, чтобы у всего этого блока была тень.

вот как сверстать такую фигуру с закруглением всех углов на 10 пикселей и добавлением тени?

помогите плиз кодом

всем заранее спасибо за участие

вот картинка для наглядности

png how_css.png
Anamnado
На сайте с 08.02.2010
Offline
239
#1

CSS3

объекты учебник - https://www.internet-technologies.ru/articles/sozdaem-geometricheskie-figury-s-pomoschyu-css.html#header-15

тень учебник - http://htmlbook.ru/css/box-shadow


на десктопе 4 блока в ряд.
на мобиле 4 блока в столбик.

смена стилей оформления css при разном разрешении экрана сегодня не является сложностью

визуальное наложение объектов друг на друга как в задаче придется покумекать самостоятельно..

готового кода для данной задачи не имею..

Подпись без рабочей ссылки все равно, что коитус без кульминации ((c) Anadonam)
MF
На сайте с 25.10.2009
Offline
75
#2
Anamnado:
CSS3
объекты учебник - https://www.internet-technologies.ru/articles/sozdaem-geometricheskie-figury-s-pomoschyu-css.html#header-15
тень учебник - http://htmlbook.ru/css/box-shadow

смена стилей оформления css при разном разрешении экрана сегодня не является сложностью

визуальное наложение объектов друг на друга как в задаче придется покумекать самостоятельно..
готового кода для данной задачи не имею..

наложение не проблема, я через z-index делаю.

у меня проблема с фигурой, я не могу их построить никак.

S
На сайте с 13.10.2014
Offline
147
#3

нетривиальная задачка

        <div class="label__wrapper label__mark_1">
<div class="label"></div>
<div class="label__mark"></div>
</div>
<div class="label__wrapper label__mark_2">
<div class="label"></div>
<div class="label__mark"></div>
</div>
<div class="label__wrapper label__mark_3">
<div class="label"></div>
<div class="label__mark"></div>
</div>

<style>
.label__wrapper{
display:inline-block;
position:relative;
box-shadow: 0px 0px 6px RGBA(0,0,0,0.2);
width:100px;
height:80px;
border-radius:10px 4px 4px 10px;
}

.label{
display:block;
position:relative;
width:100px;
height:80px;
background-color:#ffffff;
border-radius:10px 4px 4px 10px;
z-index:1;
}

.label__mark{
display: block;
position: absolute;
content: "";
right: -27px;
width: 57px;
height: 57px;
top: 12px;
background-color: #ffffff;
border-radius: 5px 10px 5px 0;
transform: rotate(45deg);
box-shadow: 2px -2px 8px RGBA(0,0,0,0.1);
z-index: 0;
}

.label__mark_1{z-index:2; }
.label__mark_2{z-index:1;margin-left:-10px;}
.label__mark_3{z-index:0;margin-left:-10px;}

</style>

http://silicoid.ru/experiments/label.html

MF
На сайте с 25.10.2009
Offline
75
#4
silicoid:
нетривиальная задачка
        <div class="label__wrapper label__mark_1">

<div class="label"></div>
<div class="label__mark"></div>
</div>
<div class="label__wrapper label__mark_2">
<div class="label"></div>
<div class="label__mark"></div>
</div>
<div class="label__wrapper label__mark_3">
<div class="label"></div>
<div class="label__mark"></div>
</div>

<style>
.label__wrapper{
display:inline-block;
position:relative;
box-shadow: 0px 0px 6px RGBA(0,0,0,0.2);
width:100px;
height:80px;
border-radius:10px 4px 4px 10px;
}

.label{
display:block;
position:relative;
width:100px;
height:80px;
background-color:#ffffff;
border-radius:10px 4px 4px 10px;
z-index:1;
}

.label__mark{
display: block;
position: absolute;
content: "";
right: -27px;
width: 57px;
height: 57px;
top: 12px;
background-color: #ffffff;
border-radius: 5px 10px 5px 0;
transform: rotate(45deg);
box-shadow: 2px -2px 8px RGBA(0,0,0,0.1);
z-index: 0;
}

.label__mark_1{z-index:2; }
.label__mark_2{z-index:1;margin-left:-10px;}
.label__mark_3{z-index:0;margin-left:-10px;}

</style>


http://silicoid.ru/experiments/label.html

под ПК норм, сделал на вашем примере такое: https://codepen.io/macifree/pen/BXRLgj

под мобильник не могу это адаптировать, потому что ширина у блока должна быть резиновая, и эта "стрелочка", как её адаптировать?

S
На сайте с 30.09.2016
Offline
459
#5
MaciFree:
"стрелочка", как её адаптировать?

Делать изображением.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
MF
На сайте с 25.10.2009
Offline
75
#6
Sitealert:
Делать изображением.

а так не хочется...

S
На сайте с 13.10.2014
Offline
147
#7
MaciFree:
под мобильник не могу это адаптировать,

Мобильная там сложнее,

        <div class="labels__wrapper">

<div class="label__wrapper label__mark_1">
<div class="label"></div>
<div class="label__mark"></div>

</div>
<div class="label__wrapper label__mark_2">
<div class="label"></div>
<div class="label__mark"></div>

</div>
<div class="label__wrapper label__mark_3">
<div class="label"></div>
<div class="label__mark"></div>
</div>

</div>

<style>
body{ margin:0; }

.labels__wrapper{
display:flex;
position:relative;
flex-direction:column;
width:90vw;
left:5vw;
top: 10px;
margin:0;
}

.label__wrapper{
display: inline-block;
position: relative;
box-shadow: 0px -4px 4px RGBA(0,0,0,0.1);
width: 100%;
height: 160px;
border-radius: 10px 10px 4px 4px;
margin: 0;
padding: 0;
}

.label{
display: block;
position: relative;
width: 100%;
height: 137px;
background-color: white;
border-radius: 10px 10px 0 0;
z-index: 1;
left: 0px;
top: 1px;
}

.label__mark:before,
.label__mark:after{
display: block;
position: absolute;
content: "";
width: calc(50% + 15px);
height: 160px;
top: 0;
background-color: white;
z-index: 0;
}

.label__mark:before{
left: 0;
border-radius: 10px 10px 19px 10px;
box-shadow: -4px 4px 4px RGBA(0,0,0,0.05);

transform: skewY(10deg);
transform-origin: top left;
}

.label__mark:after{
right:0;
border-radius: 10px 10px 10px 19px;
box-shadow: 4px 4px 4px RGBA(0,0,0,0.05);

transform: skewY(-10deg);
transform-origin: top right;
}

.label__mark_1{z-index:2; }
.label__mark_2{z-index:1; margin-top:-10px;}
.label__mark_3{z-index:0; margin-top:-10px;}

</style>

http://silicoid.ru/experiments/label_v.html

MF
На сайте с 25.10.2009
Offline
75
#8

кайф, спасибо

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий