1

Как сверстать такую карточку товара?

2 ответа 2

6

Как сверстать карточку товара без верхнего уголка?

Можно через линейный градиент, указав полупрозрачность


Насчет скругления углов + рамки:

Если не нужен IE и Edge, то через Clip-path.

Если нужен IE и Edge, то как-то так.

Левый нижний и правый верхний уголки не идеальные, но зато решение без усложнений

Результат

body {
  background: #000;
}

div {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, transparent 25px, #0090D9 25px) top / 100% 5px no-repeat, linear-gradient(to bottom, transparent 25px, #0090D9 25px) left / 5px 100% no-repeat, linear-gradient(135deg, transparent 17px, #0090D9 17px, #0090D9 22px, #fff 20px);
  border: 5px solid #0090D9;
  border-top: none;
  border-left: none;
  border-radius: 6px;
}
<div></div>

Тот же код на CodePen

введите сюда описание изображения

2

#cart {
	width: 200px;
	height: 370px;
	background: black;
	position: relative;
}
 
#cart:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;    
	border-bottom: 29px solid black;
	border-left: 29px solid #eee;
	border-right: 29px solid #black;
	width: 42px;
	height: 0;
}
<div id="cart"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.