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

MF

75

MaciFree

30 июля 2019, 20:03

394

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

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

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

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

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

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

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

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

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

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

png how_css.png

242

Anamnado

30 июля 2019, 20:10

#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 при разном разрешении экрана сегодня не является сложностью

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

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

1

MF

75

MaciFree

30 июля 2019, 20:17

#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

171

silicoid

30 июля 2019, 22:09

#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

75

MaciFree

31 июля 2019, 08:42

#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

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

1

S

469

Sitealert

31 июля 2019, 08:48

#5

MaciFree:
"стрелочка", как её адаптировать?

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

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.

MF

75

MaciFree

31 июля 2019, 08:59

#6

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

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

S

171

silicoid

31 июля 2019, 10:23

#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

4

MF

75

MaciFree

31 июля 2019, 19:12

#8

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

Дзен реализовал для авторов возможность вывода денег через СПБ

Что делать, чтобы попасть в ответы Google Bard