Возможно ли создать данную фигуру на чистом CSS ?

@Black_Star · Регистрация: 06.05.2016

Author24 — интернет-сервис помощи студентам

Добрый день уважаемые. Вот возникла необходимость создания данной фигуры на CSS. (canvas и svg в данном варианте не подходят) Также буду благодарен если кто-то назовет её правильное название, а то я её только как гистерезис намагничивания знаю

@mrtoxas · 05.12.2016, 02:40

Как фигуру не называй, а делать ее придется в svg

А почему вам не подходит этот вариант?

@Black_Star · 08.12.2016, 15:20 **[ТС]**

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Figure</title>
    <style>
 
 
    .transform{
        width: 400px;
        height: 200px;
        margin-left: 0;
 
        transform: rotate(30deg) skew(30deg);
        transform-origin: center;
 
 
    }
        .firstBl{
            width: 200px;
            height: 100px;
             
            margin-top: 20px;
            margin-left: 200px;
 
            background-color: black;
            border-radius: 84% 0 0 0;
        }
 
.innerBl1{
    margin-left: 50px;
    width: 150px;
    height: 100px;
     background-color: pink;
            border-radius: 105% 0 0 0;
}
 
.secondBl{
    width: 200px;
    height: 100px;
    margin-left: 50px;
         
        background-color: black;
            border-radius: 0 0 84% 0;
}
 
.innerBl2{
    margin-left: 0px;
    width: 150px;
    height: 100px;
     background-color: pink;
     border-radius: 0 0 105% 0;
}
 
 
 
    </style>
 
</head>
<body>
    <div class="transform">
            <div class="firstBl">
        <div class="innerBl1"></div>
            </div>
 
            <div class="secondBl">
                <div class="innerBl2"></div>
            </div>
 
    </div>
 
 
</body>
</html>

Повернул для примера

@Black_Star 23 / 22 / 17 Регистрация: 06.05.2016 Сообщений: 260
		1
	Возможно ли создать данную фигуру на чистом CSS ? 04.12.2016, 13:47. Показов 1103. Ответов 2 Метки нет (Все метки) Добрый день уважаемые. Вот возникла необходимость создания данной фигуры на CSS. (canvas и svg в данном варианте не подходят) Также буду благодарен если кто-то назовет её правильное название, а то я её только как гистерезис намагничивания знаю Миниатюры 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	05.12.2016, 02:40	2
	Как фигуру не называй, а делать ее придется в svg А почему вам не подходит этот вариант? 0

	08.12.2016, 15:20

Возможно ли создать данную фигуру на чистом CSS ?

Решение