Javascript.RU

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

CSS:Как сделать "выгиб внутрь"
Как сделать "выгиб внутрь" линий вот такой для блочного элемента (как на скриншоте ниже)?
С помощью iframe#video { transform: skew(5deg); } можно сделать наклон, но вот выгнуть линии как так можно? Есть идеи?

В инете нашел только дико костыльный способ путём добавления перекрывающих div с каждой из 4-х сторон (ну должно же, елки-палки, быть более элегантное решение), вот перекрытие с одной стороны:

<div class="parent">
<div class="block">
</div>
</div>

.parent{
position:relative;
margin:0 auto;
width:400px;
height:200px;
background:rgb(20, 31, 41);
overflow:hidden;

}

.block{
text-align:center;
position:absolute;
width:102%;
height:40px;
background:white;
bottom:-18px;
left:-1%;
border-radius:50%;
}
Ответить с цитированием
  #2 (permalink)  
Старый 14.07.2017, 11:53
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Я бы делал маской
http://htmlbook.ru/blog/maskirovanie-v-css
http://bennettfeely.com/clippy/
ни каких добавочных элементов и искажений, которые нагружалуют проц.
Ответить с цитированием
  #3 (permalink)  
Старый 14.07.2017, 15:27
Новичок на форуме
Отправить личное сообщение для SeregaNv Посмотреть профиль Найти все сообщения от SeregaNv
 
Регистрация: 14.07.2017
Сообщений: 6

спасибо, вот так
-webkit-clip-path: polygon(43% 5%, 87% 8%, 91% 45%, 94% 67%, 100% 100%, 63% 93%, 37% 90%, 12% 86%, 6% 36%, 0 0);
clip-path: polygon(43% 5%, 87% 8%, 91% 45%, 94% 67%, 100% 100%, 63% 93%, 37% 90%, 12% 86%, 6% 36%, 0 0);

удалось сделать

а как border поставить (чтоб border такой же выгнутый, как в примере), ну сейчас просто обрезается border этим трафаретом?
Ответить с цитированием
  #4 (permalink)  
Старый 14.07.2017, 15:50
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Можешь сделать бордер через :before и оформить его ка подложку через position:absolute z-index:-1 (ну или просто блоку с видио задать больше z-index) а кэтой подложке применить такую же маску. Единственные минус, там не всё так гладко с поддержкой свойства clip-path по браузерам
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите сделать на ajax или java. Bajex AJAX и COMET 2 20.06.2013 05:13
Исчезающие меню, как сделать стандартными методами? Astrey Общие вопросы Javascript 14 08.03.2013 20:28
filter(this,this) как правильно сделать? Smip jQuery 5 23.02.2013 03:07
Как сделать что бы при регистрации человека на моем сайте у него не появлялось... drunkwolfs Общие вопросы Javascript 2 07.08.2012 10:58
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 01:35