Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/18: Рейтинг темы: голосов - 18, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 20.04.2015
Сообщений: 10
1

Стрелка в блоке

12.10.2015, 18:07. Показов 3178. Ответов 4
Метки нет (Все метки)

Есть блок
CSS
1
2
3
4
5
6
7
8
9
.content-wrapper {
    background: url(../img/texture-noise@1x.png) repeat #EFEFEF;
    top: 50%;
    min-height: 12%;
    position:absolute;
    z-index: 2;
    width: 100%;
    padding-top: 15px;
}
Нужно в нем сделать прозрачную стрелку сверху.
По вот такому примеру.
Стрелка в блоке

Пробовал уже все, что можно, ничего не получилось.
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
12.10.2015, 18:07
Ответы с готовыми решениями:

Какова вероятность, что у стрелка А попаданий будет на одно больше, чем у стрелка Б?
Доброго времени суток всем! Есть задача: "Стрелки А и Б попадают каждый в свою мишень с...

Написание простого скрипта (Стрелка влево\стрелка вправо)
Если кому-нибудь это не сложно, написать скрипт, который в активном окне нажимает поочередно...

Три стрелка стреляют по цели.Вероятность попадания в цель для первого стрелка равна 0,7,для второго - 0,8,для третьего - 0,9
Три стрелка стреляют по цели.Вероятность попадания в цель для первого стрелка равна 0,7,для второго...

Нажимая "стрелка влево", "стрелка вправо" превращать строку в столбец по или против часовой стрелке
Вывести на экран строку из 10 любых символов. Нажимая "стрелка влево", "стрелка вправо" превращать...

__________________
4
433 / 352 / 259
Регистрация: 29.11.2011
Сообщений: 628
12.10.2015, 18:55 2
Например так: https://jsfiddle.net/ms3mb6L4/5/
HTML5
1
2
3
<div class="wrap">
    <img src="https://churchmag.press/wp-content/uploads/2015/03/Easter-Social-Media-Kit-Banner-Site.jpeg" />
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.wrap {
  position: relative;
  overflow: hidden;
  width: 90%;
  height:350px;
  margin: 0 auto;
  background-color:#fff;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.wrap:before, .wrap:after {
  content:'';
  position: absolute;
  bottom: 0;
  width: 50%;
  background-color: inherit;
  padding-bottom:3%;
}
.wrap:before {
  right: 50%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}
.wrap:after {
  left: 50%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
}
0
0 / 0 / 0
Регистрация: 20.04.2015
Сообщений: 10
12.10.2015, 19:05  [ТС] 3
Так делается внешняя стрелка на картинке ведь. А мне нужна внутрення и прозрачная на блоке, потому, что картинка подвижна и лежит под блоком.
0
433 / 352 / 259
Регистрация: 29.11.2011
Сообщений: 628
12.10.2015, 19:31 4
Лучший ответ Сообщение было отмечено Sn1k3rS как решение

Решение

Можно через свойство clip-path, например так https://jsfiddle.net/ms3mb6L4/9/
HTML5
1
2
3
<div class="wrap">
    <img src="https://churchmag.press/wp-content/uploads/2015/03/Easter-Social-Media-Kit-Banner-Site.jpeg" />
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.wrap {
  position: relative;
  overflow: hidden;
  width: 90%;
  height:350px;
  margin: 0 auto;
  background-color:#fff;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
 
 
img {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 63% 100%, 49% 79%, 35% 100%, 0 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 63% 100%, 49% 79%, 35% 100%, 0 100%);
}
или https://jsfiddle.net/ms3mb6L4/6/
HTML5
1
2
3
<div class="wrap">
    <img src="https://churchmag.press/wp-content/uploads/2015/03/Easter-Social-Media-Kit-Banner-Site.jpeg" />
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.wrap {
  position: relative;
  overflow: hidden;
  width: 90%;
  height:350px;
  margin: 0 auto;
  background-color:#fff;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
 
 
img {
    -webkit-clip-path: polygon(0 100%, 0 0, 44% 0, 50% 9%, 56% 0, 100% 0, 100% 100%);
    clip-path: polygon(0 100%, 0 0, 44% 0, 50% 9%, 56% 0, 100% 0, 100% 100%);
}
1
0 / 0 / 0
Регистрация: 20.04.2015
Сообщений: 10
12.10.2015, 20:03  [ТС] 5
воо, спасибо большое, то, что нужно.
но вот как сделать размер поменьше ?

Добавлено через 6 минут
разобрался, спасибо

Добавлено через 6 минут
Один вопрос остался. Когда делаю меньше окно, то и сужается этот вырез. Как сделать что бы он в высоте уменьшался тоже или статический размер ? Ибо когда делаешь отступ в пикселях, то он при уменьшение окна сдвигается а если в процентах, то сужается. Как поступить ?
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
12.10.2015, 20:03

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Изменение в одном блоке при нажатии в другом блоке
Скажите возможно ли с помощью CSS или HTML(что мало вероятно) сделать так чтобы если я...

На экране изобразить стрелу и шар. Организовать управление стрелой, для попадания в шар знаками "стрелка влево", "стрелка вправо"
На экране изобразить стрелу и шар. Организовать управление стрелой, для попадания в шар знаками...

Перехват клавиш "стрелка влево" и "стрелка вправо"
Подскажите, как перехватывать клавишу СТРЕЛКА ВЛЕВО и ВПРАВО. Не разбираюсь в KeyPress, смог...

Стрелка
Как нарисовать стрелку точно такую же как на клаве VK_LEFT и отключить клавиши VK_UP И VK_DOWN


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.