Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2017, 11:33
Аспирант
Отправить личное сообщение для Quark_ Посмотреть профиль Найти все сообщения от Quark_
 
Регистрация: 24.06.2015
Сообщений: 95

Уголок на css через псевдоэлемент
Подскажите, плиз, как сделать такой уголок на css с помощью :before?
Ответить с цитированием
  #2 (permalink)  
Старый 20.01.2017, 11:49
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Quark_
как сделать такой уголок на css с помощью :before?
Как вариант:
- обычный красный квадрат :before
- перекрыть его сверху белым фоном родителя
Ответить с цитированием
  #3 (permalink)  
Старый 20.01.2017, 12:01
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
	.block{
		position: relative;
		width: 150px;
		height: 150px;
		background-color: #f00;
	}

	.block:before{
		position: absolute;
		content: "";
		left: 20%;
		top: 20%;
		width: inherit;
		height: inherit;
		z-index: 2;
		background-color: #fff; // цвет должен быть такой же как и твой фон 
	}
</style>
</head>
<body>
	<div class="block"></div>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2017, 13:30
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от ksa
- обычный красный квадрат :before
- перекрыть его сверху белым фоном родителя
Мой вариант не получится...
Т.к. z-index элемента и его псевдоэлемента будет как у элемента.

<style type='text/css'>
div {
	position: relative;
	width: 100px;
	height: 100px;
	margin: 100px;
	z-index: 2;
	background-color: green;
}
div:before {
	content: '';
	display: block;
	position: relative;
	top: -10px;
	left: -10px;
	width: 50px;
	height: 50px;
	z-index: 1;
	background-color: red;
}
</style>
<div></div>
Ответить с цитированием
  #5 (permalink)  
Старый 20.01.2017, 13:51
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Такой вот шахер-махер предложу...
<style type='text/css'>
div {
	width: 100px;
	height: 100px;
	margin: 100px;
	background-color: green;
}
div:before,
div:after {
	content: '';
	display: block;
	position: relative;
	left: -10px;
	background-color: red;
}
div:before {
	top: -10px;
	width: 50px;
	height: 10px;
}
div:after {
	top: -20px;
	width: 10px;
	height: 50px;
}
</style>
<div></div>
Ответить с цитированием
  #6 (permalink)  
Старый 20.01.2017, 14:02
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Я бы сделал так:

div {
  background: #FFF;
  height: 100px;
  position: relative;
  width: 100px;
}
div::before {
  border: 5px solid red;
  border-bottom: none;
  border-right: none;
  box-sizing: border-box;
  content: '';
  height: 20px;
  left: -7px;
  position: absolute;
  top: -7px;
  width: 20px;
}
Ответить с цитированием
  #7 (permalink)  
Старый 20.01.2017, 14:11
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Ruslan_xDD
Я бы сделал так
Я забываю, что есть бордюры...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Когда меняю через JQuery html, то измененный CSS сбрасывается. iskman Javascript под браузер 1 20.03.2014 08:40
Управление CSS через JS (Sandr) Общие вопросы Javascript 3 16.03.2012 12:22
Эмулировать список через селект Nanto Элементы интерфейса 2 06.03.2012 11:54
CSS vs DOCTYPE gaolong (X)HTML/CSS 11 24.03.2009 11:54
XMLHTTPRequest передача имя через POST dds AJAX и COMET 0 14.08.2008 14:44