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

88
16 августа 2021, 06:50

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

Answer 1

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

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

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

Если не нужен 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

Answer 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>

READ ALSO
Несколько таблиц с общим хедером
HTML

Несколько таблиц с общим хедером

Имеется следующий макет

 156
Error: Stray end tag
HTML

Error: Stray end tag

Что нужно исправить в данном коде чтобы он стал валидным и бузе ошибок?

 265
Не передается значение в функцию
c#

Не передается значение в функцию

В проекте VS пробую передать значение, которые получил из C# в функцию JS через a href почему-то выходит "Заполнить", вместо значения value="1"Новичок...

 152
Изменять значение ячейки по ID BitArray
c#

Изменять значение ячейки по ID BitArray

Я создаю BitArray

 210