Ромбик на конце div-блока

@Fedde_Le_Grand · Регистрация: 27.09.2012

Author24 — интернет-сервис помощи студентам

Всем привет,

Столкнулся с такой задачей... Мне нужно создать такой div-блок средствами html и css: см. вложение.
Нужно чтобы был целый блок, т.к. при наведении, он подсвечивается. Просьба помочь.

Заранее благодарен.

@Karssen · 30.10.2015, 18:36

http://jsfiddle.net/Xck2A/2311/ Как вариант

HTML5

1	<a href="#">Кнопка</a>

CSS

a{
    display:block;
    width:200px;
    height:50px;
    background-color:orange;
    border-radius:8px;
    position:relative;
}
a::after{
  content:'';
   display:block;
   position:absolute;
   border-left:12px solid orange;
    border-top:22px solid white;
    border-right:10px solid white;
    border-bottom:22px solid white;
    background-color:red;
    right:-20px;
    top:3px;
}

@Fedde_Le_Grand · 31.10.2015, 01:05 **[ТС]**

Спасибо большое!

CSS

1
2
3

 border-top:19px solid transparent;
    border-right:6px solid transparent;
    border-bottom:18px solid transparent;

Сделал так, чтобы при подсвечивании не фон был прозрачным.

@Almag13 · 31.10.2015, 05:08

Можно использовать картинку также... вырезать ее из исходника и регулировать через background-size...

CSS

a:after{
content: "";
display: block;
backrgound: url() no-repeat left top;
height: ;
width: ;
}

@newJS · 31.10.2015, 07:06

Сообщение от Almag13

Можно использовать картинку также

Не серьёзно.
Добавлять лишнюю картинку, там где без неё можно обойтись, не серьёзно это.

@newJS · 31.10.2015, 07:06

Сообщение от Almag13

Можно использовать картинку также

Не серьёзно.
Добавлять лишнюю картинку, там где без неё можно обойтись, не серьёзно это.

@Almag13 · 31.10.2015, 14:31

Согласен, но как вариант... А что если бы фон был градиентом?

@newJS · 01.11.2015, 06:19

тут типа генератор всех этих хвостиков

@ns16 · 01.11.2015, 12:29

Такую фигуру можно сделать с помощью SVG:

HTML5

1
2
3

<svg class="svg" width="210" height="60">
    <path d="M 6,0 L 194,0 A 6,3 0 0,1 198,2 L 210,30 L 198,58 A 6,3 0 0,1 194,60 L 6,60 A 6,6 0 0,1 0,54 L 0,6 A 6,6 0 0,1 6,0 z" fill="#D9200A" />
</svg>

Песочница

@newJS · 02.11.2015, 06:20

Сообщение от ns16

Такую фигуру можно сделать с помощью SVG:

А ещё канвасом.
Или картинку как base64.

В итоге куча вариантов собралась.

@Fedde_Le_Grand 0 / 0 / 0 Регистрация: 27.09.2012 Сообщений: 23
		1
	Ромбик на конце div-блока 30.10.2015, 18:09. Показов 1414. Ответов 9 Метки нет (Все метки) Всем привет, Столкнулся с такой задачей... Мне нужно создать такой div-блок средствами html и css: см. вложение. Нужно чтобы был целый блок, т.к. при наведении, он подсвечивается. Просьба помочь. Заранее благодарен. Изображения 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	31.10.2015, 07:06	5
	Сообщение от Almag13 Можно использовать картинку также Не серьёзно. Добавлять лишнюю картинку, там где без неё можно обойтись, не серьёзно это. 0

@Almag13 27 / 28 / 16 Регистрация: 18.10.2015 Сообщений: 187
	31.10.2015, 14:31	7
	Согласен, но как вариант... А что если бы фон был градиентом? 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	01.11.2015, 06:19	8
	тут типа генератор всех этих хвостиков 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	02.11.2015, 06:20	10
	Сообщение от ns16 Такую фигуру можно сделать с помощью SVG: А ещё канвасом. Или картинку как base64. В итоге куча вариантов собралась. 0