BLOGTOP

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » BLOGTOP » Уголок wap мастера » CSS/HTML » Различные фигуры на CSS

Различные фигуры на CSS

Страница: 1
Ответить

Сообщений 1 страница 1 из 1

1

  • Автор: МАЧОнаДАЧЕ
  • Владелец "BT"
  • МАЧОнаДАЧЕ
  • Откуда: Новокузнецк
  • Зарегистрирован: 2022-03-17
  • Приглашений: 0
  • Сообщений: 786
  • Уважение: [+56/-1]
  • Позитив: [+34/-3]
  • Пол: Мужской
  • Возраст: 42 [1983-02-26]
  • Провел на форуме:
    17 дней 19 часов
  • Голосовые уведомления: 1
  • https://dl.dropboxusercontent.com/s/6xj5hs016td5dci/pelevin-otryvok.mp3

Квадрат
[html]<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.square {
  height: 50px;
  width: 50px;
  background-color: #555;
}
</style>
</head>
<body>

<h2>Квадрат CSS</h2>
<div class="square"></div>
[/html]

Код:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.square {
  height: 50px;
  width: 50px;
  background-color: #555;
}
</style>
</head>
<body>

<h2>Квадрат CSS</h2>
<div class="square"></div>

Круг
[html]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circle {
  height: 50px;
  width: 50px;
  background-color: #555;
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Круг CSS</h2>
<div class="circle"></div>

</body>
</html>
[/html]

Код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circle {
  height: 50px;
  width: 50px;
  background-color: #555;
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Круг CSS</h2>
<div class="circle"></div>

</body>
</html>

Овал
[html]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.oval {
  height: 50px;
  width: 100px;
  background-color: #555;
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Овал CSS</h2>
<div class="oval"></div>

</body>
</html>
[/html]

Код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.oval {
  height: 50px;
  width: 100px;
  background-color: #555;
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Овал CSS</h2>
<div class="oval"></div>

</body>
</html>

Трапецию
[html]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.trapezoid {
border-bottom: 50px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
}
</style>
</head>
<body>

<h2>Tрапеция CSS</h2>
<div class="trapezoid "></div>

</body>
</html>
[/html]

Код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.trapezoid {
	border-bottom: 50px solid #555;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 125px;
}
</style>
</head>
<body>

<h2>Tрапеция CSS</h2>
<div class="trapezoid "></div>

</body>
</html>

Прямоугольник
[html]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.rectangle {
  height: 50px;
  width: 100px;
  background-color: #555;
}
</style>
</head>
<body>

<h2>Прямоугольник CSS</h2>
<div class="rectangle"></div>

</body>
</html>
[/html]

Код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.rectangle {
  height: 50px;
  width: 100px;
  background-color: #555;
}
</style>
</head>
<body>

<h2>Прямоугольник CSS</h2>
<div class="rectangle"></div>

</body>
</html>

[html]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallelogram {
width: 100px;
height: 50px;
transform: skew(20deg);
background: #555;
}
</style>
</head>
<body>

<h2>Параллелограмм CSS</h2>
<div class="parallelogram"></div>

</body>
</html>

Код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallelogram {
	width: 100px;
	height: 50px;
	transform: skew(20deg);
	background: #555;
}
</style>
</head>
<body>

<h2>Параллелограмм CSS</h2>
<div class="parallelogram"></div>

</body>
</html>

[/html]

Треугольник вверх
[html]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.triangle-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #555;
}
</style>
</head>
<body>

<h2>Треугольник вверх CSS</h2>
<div class="triangle-up"></div>

</body>
</html>
[/html]

Код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.triangle-up {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid #555;
}
</style>
</head>
<body>

<h2>Тругольник вверх CSS</h2>
<div class="triangle-up"></div>

</body>
</html>

Треугольник вниз
[html]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.triangle-down {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid #555;
}
</style>
</head>
<body>

<h2>Треугольник вниз CSS</h2>
<div class="triangle-down"></div>

</body>
</html>
[/html]

Код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.triangle-left {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #555;
	border-bottom: 25px solid transparent;
}
</style>
</head>
<body>

<h2>Tреугольник влево CSS</h2>
<div class="triangle-left"></div>

</body>
</html>

Треугольник вправо
[html]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.triangle-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #555;
border-bottom: 25px solid transparent;
}
</style>
</head>
<body>

<h2>Tреугольник вправо CSS</h2>
<div class="triangle-right"></div>

</body>
</html>
[/html]

Код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.triangle-right {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid #555;
	border-bottom: 25px solid transparent;
}
</style>
</head>
<body>

<h2>Tреугольник вправо CSS</h2>
<div class="triangle-right"></div>

</body>
</html>

Треугольник влево
[html]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.triangle-left {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #555;
border-bottom: 25px solid transparent;
}
</style>
</head>
<body>

<h2>Tреугольнк влево CSS</h2>
<div class="triangle-left"></div>

</body>
</html>
[/html]

Код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.triangle-left {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #555;
	border-bottom: 25px solid transparent;
}
</style>
</head>
<body>

<h2>Tреугольник влево CSS</h2>
<div class="triangle-left"></div>

</body>
</html>

[think=http://www.kolobok.us/smiles/standart/yahoo.gif] 😎  Надеюсь Вам поможет данная тема[/think]

Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему

0

Ответить
Страница: 1

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


упс таблица

Откуда гость?
ВНИМАНИЕ! В подписи запрещены ссылки на конкурирующие сайты или форумы!

Вы здесь » BLOGTOP » Уголок wap мастера » CSS/HTML » Различные фигуры на CSS