yarian misaq Ответов: 3

Можно ли согнуть div с помощью CSS?

Можно ли согнуть div с помощью CSS?

Что-то вроде преобразования webkit...

Эффект, который я хочу создать, - это кольцевая форма пончика, но состоящая из изогнутого div, В отличие от трюков border-radius/border
пожалуйста помочь
С уважением
yarian

Что я уже пробовал:

Эффект, который я хочу создать, - это кольцевая форма пончика, но состоящая из изогнутого div, В отличие от трюков border-radius/border




Примечание 1 : я имею в виду, что срезание углов-это не обработка
Прямая линия Предположим вы хотите изменить выпуклую форму

Я пытаюсь найти этот сайт (http://www.roblaplaca.com/examples/bezierBuilder/) Но Не Работает

< style type= "text/css">
.С{
- webkit-переход: все 1S cubic-bezier(-.01, .85, .57, 1.01);
-moz-переход: все 1S кубические-Безье(-.01, .85, .57, 1.01);
переход: все 1S кубические-Безье(-.01, .85, .57, 1.01);
}
< / стиль>
&ЛТ;ИМГ СРЦ="изображения/тест.ПНГ" класс="с" /&ГТ;



 




 

Beginner Luck

да

3 Ответов

Рейтинг:
2

Nethaji chennai

В настоящее время это невозможно только с помощью CSS. Ваше самое лучшее парио должно быть, чтобы использовать холст (и некоторые JavaScript).


https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

http://www.roblaplaca.com/examples/bezierBuilder/

yarian misaq

Привет Когда Попробовать Сделать Это Я Найду Этот Сайт Спасибо За Помощь Мне
Но Iam не может использовать это и не работает например

< style type= "text/css">
.С{
- webkit-переход: все 1S cubic-bezier(-.01, .85, .57, 1.01);
-moz-переход: все 1S кубические-Безье(-.01, .85, .57, 1.01);
переход: все 1S кубические-Безье(-.01, .85, .57, 1.01);
}
< / стиль>
&ЛТ;ИМГ СРЦ="изображения/тест.ПНГ" класс="с" /&ГТ;
&ЛТ;БР /&ГТ;&ЛТ;БР /&ГТ;&ЛТ;БР /&ГТ;&ЛТ;БР /&ГТ;&ЛТ;БР /&ГТ;&ЛТ;БР /&ГТ;
в <div стиль="высота:400 пикселей;ширина:50 пикселей;фон-цвет:#число ff0000;" класс="ч"и GT;
 
< / div>
&ЛТ;БР /&ГТ;&ЛТ;БР /&ГТ;&ЛТ;БР /&ГТ;&ЛТ;БР /&ГТ;&ЛТ;БР /&ГТ;&ЛТ;БР /&ГТ;
в <div стиль="высота:50 пикселей;ширина:400 пикселей;фон-цвет:#число ff0000;" класс="ч"и GT;
 
< / div>

Рейтинг:
1

Beginner Luck

#rcorners2 {
радиус границы: 25px;
граница: 2px solid #73AD21;
обивка: 20 пикселей;
ширина: 200px;
высота: 150px;
}


< / head>
& lt;тело>

Закругленные углы для элемента с границей:


Закругленные углы!



это CSS3 так что я не уверен насчет браузера ie

yarian misaq

Я имею в виду, что срезать углы-это не манипуляция
Прямая линия Предположим вы хотите изменить выпуклую форму

Beginner Luck

что вы действительно хотите с ним сделать. Так что я могу сказать, что вам действительно нужно. можете показать изображение, которое вы хотите сделать??

Рейтинг:
0

Tanmoy banerjee

Вы должны использовать функцию полигона 

.container{
    width:445px;
    height:670px;
    overflow:hidden;
    margin:30px auto;
    shape-outside: polygon(170.67px 291.00px,126.23px 347.56px,139.79px 417.11px,208.92px 466.22px,302.50px 482.97px,343.67px 474.47px,446.33px 452.00px,443.63px 246.82px,389.92px 245.63px,336.50px 235.26px,299.67px 196.53px,259.33px 209.53px,217.00px 254.76px);
}

yarian misaq

Все Же Протестируйте Этот Код, Но Он Не Работает

Tanmoy banerjee

Прочтите это https://www.w3.org/TR/css-shapes/