Форум

Black_Star · #1 (**permalink**) 04.12.2016, 21:07

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

ruslan_mart · #2 (**permalink**) 05.12.2016, 05:58

Black_Star, можно создать 4 блока и поизвращаться с border-radius. Потом всему врапперу дать вертикальный skew.

Black_Star · #3 (**permalink**) 06.12.2016, 18:55

Ruslan_xDD, спасибо помогло)

<!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>

Форум

Справочник

Discord чат

Курсы javascript