Javascript-форум - основы яваскрипт

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - основы яваскрипт – вопросы. (https://javascript.ru/forum/misc/77082-osnovy-yavaskript-%E2%80%93-voprosy.html)

Цитата:

Сообщение от Блондинка

если бы подобное можно было нарисовать чисто на html/css

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://leaverou.github.io/conic-gradient/conic-gradient.js"></script>

<style>

.color-wheel {
	width: 200px;
	height: 200px;
	background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
	border-radius: 50%;
	box-sizing: border-box;
	-webkit-mask-image: radial-gradient(transparent 50%, black 51%);
	mask-image: radial-gradient(transparent 50%, black 51%);
}

</style>
<div class="color-wheel"></div>

Цитата:

Сообщение от Блондинка

правильнее будет как принести воды в сите если нет ведра под рукой

Есть оно у вас, это уже вы пытаетесь превратить его в сито.

Цитата:

Сообщение от Блондинка

вроде я права, без изображения чисто на хтмл/цсс не получиться нарисовать окружность и залить градиентом?

Ну почему же, можно http://htmlbook.ru/blog/tsvetovoi-krug

Malleys,
:thanks:

кто знает, возможно ли блочный элемент, допустим тот же див сделать пяти или шести угольным, как бы нижнюю сторону разделить на на две три части и эти точки которые делят нижнюю сторону опустить вниз

к примеру есть див ширина 300 высота 100, точка 150 по горизонтали и 100 по вертикали сделать ниже, например 150 и 120, или две точки 100 и 200 По горизонтали сделать ниже на 20 пикселей(любых единиц)

Цитата:

Сообщение от Блондинка

див сделать пяти или шести угольным

Если вы хотите, чтобы оно визуально так выглядело, то можно сделать при помощи clip-path https://bennettfeely.com/clippy/

надо как бы нарисовать рамку такой формы, див то прямоугольный но так сказать для декоративности нижнюю границу(border) трансформировать

-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 0, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0 0);
clip-path: polygon(30% 0%, 70% 0%, 100% 0, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0 0);

Я не понял, но вы можете использовать значения и пикселях и функцию calc

немного погуглила, но внятного ответа не нашла,
определила точки, обрезала, дальше надо сделать рамку вокруг видимой области, вот на этот вопрос и не нашла ответа, как сделать рамку

Цитата:

Сообщение от Блондинка

дальше надо сделать рамку вокруг видимой области, вот на этот вопрос и не нашла ответа, как сделать рамку

Можно тень сделать вокруг области при помощи функции drop-shadow свойства filter, но я думаю, вдруг вам потребуется залить картинку туда...

Можно ещё сделать так...

Цитата:

Сообщение от Блондинка

ширина 300 высота 100, точка 150 по горизонтали и 100 по вертикали сделать ниже, например 150 и 120

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
	<style>
		svg {
			width: 300px;
			height: 120px;
		}
	</style>
	<svg viewBox="-5 -5 310 130">
		<style>
			path {
				stroke: #f06;
				stroke-width: 10px;
				fill: none;
			}
		</style>
		<path d="M 0 0 L 300 0 L 300 100 L 150 120 L 0 100 z"></path>
	</svg>
</body>

</html>