Реализация геометрической фигуры на СSS

Pifagor · 26.07.2012

Реализация геометрической фигуры на СSS

Собственно интересует реализация данной фигуры средствами CSS

maxshevtsov · 28.07.2012

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Pifagor · 29.07.2012

maxshevtsov сказав(ла):
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Нуу с хабром я знаком...ссылка не актуальна как вы заметили..
maxshevtsov спасибо за пост.....

Del · 30.07.2012

Спасибо за интересную задачу.

Вот мой вариант:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

webkit only (пока не придумал чем отражение сделать):

HTML:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>

<style>
figure {
    position: relative; width: 200px; height: 100px;
    background: black;
    -webkit-box-reflect: below;
}

figure:before,
figure:after {
    content: "";
    position: absolute; width: 100px; height: 100px; 
    border-radius: 0 0 100px;
    background: white;    
}
figure:after {
    left: 100px;
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);    
}
</style>  
</head>
<body>
  <figure></figure>	
</body>
</html>

Pifagor · 31.07.2012

Del сказав(ла):
Спасибо за интересную задачу.

Вот мой вариант:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

webkit only (пока не придумал чем отражение сделать):

HTML:

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style> figure { position: relative; width: 200px; height: 100px; background: black; -webkit-box-reflect: below; } figure:before, figure:after { content: ""; position: absolute; width: 100px; height: 100px; border-radius: 0 0 100px; background: white; } figure:after { left: 100px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } </style> </head> <body> <figure></figure> </body> </html>

Del a если что то типа

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

???

Del · 31.07.2012

Pifagor
Реализовать с помощью более чем одного элемента - легко, способов куча.
Я предполагал что задача стоит сделать одним div и без js.

Pifagor · 31.07.2012

Del сказав(ла):
Pifagor
Реализовать с помощью более чем одного элемента - легко, способов куча.
Я предполагал что задача стоит сделать одним div и без js.

нуу без js эт в любом случае, по поводу простоты почему то из такого количества просмотров ответов 0 (кроме вашего)

Del · 31.07.2012

Если можно использовать два элемента, то:

берём

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
выкидываем webkit-box-reflect
добавляем второй блок, разворачиваем его

Готово:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Pifagor · 01.08.2012

Del сказав(ла):
Если можно использовать два элемента, то:

берём

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

выкидываем webkit-box-reflect

добавляем второй блок, разворачиваем его

Готово:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Спасибо

Реализация геометрической фигуры на СSS

Вкладення