26.03.2019, 18:00
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
если бы подобное можно было нарисовать чисто на 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>
|
|
26.03.2019, 18:03
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Блондинка
|
|
правильнее будет как принести воды в сите если нет ведра под рукой
|
Есть оно у вас, это уже вы пытаетесь превратить его в сито.
|
Сообщение от Блондинка
|
|
вроде я права, без изображения чисто на хтмл/цсс не получиться нарисовать окружность и залить градиентом?
|
Ну почему же, можно http://htmlbook.ru/blog/tsvetovoi-krug |
|
26.03.2019, 19:30
|
 |
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Malleys,
|
|
27.03.2019, 18:37
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
кто знает, возможно ли блочный элемент, допустим тот же див сделать пяти или шести угольным, как бы нижнюю сторону разделить на на две три части и эти точки которые делят нижнюю сторону опустить вниз
к примеру есть див ширина 300 высота 100, точка 150 по горизонтали и 100 по вертикали сделать ниже, например 150 и 120, или две точки 100 и 200 По горизонтали сделать ниже на 20 пикселей(любых единиц)
|
|
27.03.2019, 19:39
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
див сделать пяти или шести угольным
|
Если вы хотите, чтобы оно визуально так выглядело, то можно сделать при помощи clip-path https://bennettfeely.com/clippy/ |
|
27.03.2019, 20:26
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
надо как бы нарисовать рамку такой формы, див то прямоугольный но так сказать для декоративности нижнюю границу(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);
|
|
27.03.2019, 21:15
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Я не понял, но вы можете использовать значения и пикселях и функцию calc
|
|
27.03.2019, 21:56
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
немного погуглила, но внятного ответа не нашла,
определила точки, обрезала, дальше надо сделать рамку вокруг видимой области, вот на этот вопрос и не нашла ответа, как сделать рамку
|
|
27.03.2019, 22:24
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
дальше надо сделать рамку вокруг видимой области, вот на этот вопрос и не нашла ответа, как сделать рамку
|
Можно тень сделать вокруг области при помощи функции 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>
|
|
|
|
