С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
0 / 0 / 0
Регистрация: 11.01.2016
Сообщений: 39
1

Подскажите как можно сверстать такую фигуру через CSS

04.04.2016, 09:43. Показов 698. Ответов 3
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Подскажите как можно сверстать такую фигуру через CSSНазвание: фигура.png
Просмотров: 19

Размер: 5.8 Кб
0
IT_Exp
Эксперт
8794 / 1073 / 104
Регистрация: 17.06.2006
Сообщений: 12,602
Блог
04.04.2016, 09:43
Ответы с готовыми решениями:

Как сделать вот такую фигуру на CSS?
Пробовал с border-radius: 999px 0 0 0; но у меня вечно какие то 70px прямая линия остаётся, а нужно...

Подскажите, пожалуйста, как правильно нарисовать такую линию в css?
Пробовал эту линию через <hr> , но что то не выходило по центру сделать. Да и думаю, так сейчас не...

Как сделать фигуру через css
Здравствуйте форумчани!Помогите плис сделать фигуру через css (прикрепленный рисунок). попробовал...

Как нарисовать через CSS такую дугу?
Как нарисовать через CSS такую дугу? Двух-цветную? Что вообще понимается в макете под таким...

3
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
04.04.2016, 10:29 2
HTML5
1
2
3
<div class="figure">
 
</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
.figure{
  width:400px;
  height:150px;
  margin:100px auto;
  background:#6767fc;
  position:relative;
  border-radius:10px;
}
.figure:before{
  content:"";
  display:block;
  position:absolute;
  width:200px;
  height:200px;
  background:#6767fc;
  border-radius:50%;
  left:50%;
  margin-left:-100px;
  top:-100px;
}
.figure:after{
  content:"";
  display:block;
  position:absolute;
  border:30px solid transparent;
  border-top-color:#6767fc;
  top:100%;
  left:50%;
  margin-left:-30px;
}
https://jsfiddle.net/shakalaka/snapp4mf/
0
Эксперт HTML/CSS
2964 / 2620 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
04.04.2016, 10:43 3
Предложу свой вариант...
HTML5
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
40
41
42
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<style>
.bubble 
{
position: relative;
width: 210px;
height: 80px;
padding: 0px;
background: #009AFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-top:100px
}
 
.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 17px 0;
border-color: #009AFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 90px;
}
 
.circle{position:absolute; width:115px; height:115px; top:-50px; left:48px; background: #009AFF; border-radius:50%}
</style>
</head>
<body>
<div class="bubble">
    <div class="circle"></div>
</div>
</body>
</html>
0
0 / 0 / 0
Регистрация: 11.01.2016
Сообщений: 39
04.04.2016, 12:04  [ТС] 4
Спасибо большое вам!)
0
04.04.2016, 12:04
BasicMan
Эксперт
19315 / 2622 / 84
Регистрация: 17.02.2009
Сообщений: 10,364
Блог
04.04.2016, 12:04
Помогаю со студенческими работами здесь

Как сделать такую диагональную линию через CSS?
В макете есть диагональная линяя, которая идея от одного края к другому постепенная снижаясь. Как...

Подскажите, как можно сделать такую программу?
Программа должна отображать робота и лабиринта, позволять управлять движением робота по лабиринту и...

Как сверстать такую тень?
Подскажите пожалуйста...

Как сверстать такую стрелочку?
Всем привет) Подскажите варианты вёрстки такой стрелочки, которая появляется при наведении: ...

Как сверстать такую кнопку?
Добрый день! Как сверстать кнопку и прилегающую к ней сверху рамку, внутри которой описание? ...

Как сверстать такую кнопку
Доброго времени суток! Дизайнеры нарисовали заумную кнопку, а у меня на это ума не хватает....


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Блоги программистов
Обновление сайта www.historian.b­y
Reglage 05.01.2025
Обещал подвести итоги 2024 года для сайта. Однако начну с того, что изменилось за неделю. Добавил краткий урок по последовательности действий при анализе вредоносных файлов и значительно улучшил урок. . .
Как использовать GraphQL в C# с HotChocolate
Programming 05.01.2025
GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .
Модель полного двоичного суматора с помощью логических операций (python)
AlexSky-coder 04.01.2025
def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()
Это мы не проходили, это нам не задавали...(аси­­хронный счётчик с управляющим сигналом задержки).
Hrethgir 04.01.2025
Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .
Руководство по созданию бота для Телеграм на Python
IT_Exp 04.01.2025
Боты для Телеграм представляют собой автоматизированные программы, которые выполняют различные задачи, взаимодействуя с пользователями через интерфейс мессенджера. В данной статье мы рассмотрим,. . .
Применение компонентов PrimeVue в Vue.js 3 на TypeScript
BasicMan 04.01.2025
Введение в PrimeVue и настройка окружения PrimeVue представляет собой мощную библиотеку компонентов пользовательского интерфейса для Vue. js 3, которая предоставляет разработчикам богатый набор. . .
Как стать Senior developer
cpp_developer 04.01.2025
В современной индустрии разработки программного обеспечения позиция Senior Developer представляет собой не просто следующую ступень карьерной лестницы, а качественно новый уровень профессионального. . .
Что известно о дате выхода Windows 12 и чего от нее ждать
IT_Exp 04.01.2025
В мире технологий постоянно происходят изменения, и операционные системы не являются исключением. Windows 11, выпущенная в октябре 2021 года, принесла множество инноваций и улучшений, но. . .
Что новенького в .NET Core 9
Programming 04.01.2025
Обзор ключевых изменений в . NET Core 9 Платформа . NET Core продолжает активно развиваться, и версия 9 представляет собой значительный шаг вперед в эволюции этой технологии. Новый релиз. . .
Инструкция по установке python3.13.1 в Debian 12
AlexSky-coder 03.01.2025
sudo apt update sudo apt install build-essential zlib1g-dev libncurses5-dev libgdbm-dev libnss3-dev libssl-dev libreadline-dev libffi-dev wget. . .
Затестил триггеры. архив проекта прилагаю с GOA файлами в настройках архиватора проектов.
Hrethgir 03.01.2025
В этот раз нет закольцованности, потому что от неё только глюки, как я понял, логика не вырезанная. Триггеры очень быстрые если верить измерениям с помощью анализатора от Gowin. Есть ещё регистры,. . .
Python в помощь DevOps
IT_Exp 03.01.2025
Причины использования Python в работе DevOps Python стал неотъемлемой частью мира DevOps, и это не случайно. Этот язык программирования обладает множеством преимуществ, которые делают его. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru