Цитата:
<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 пикселей(любых единиц) |
Цитата:
|
надо как бы нарисовать рамку такой формы, див то прямоугольный но так сказать для декоративности нижнюю границу(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
|
немного погуглила, но внятного ответа не нашла,
определила точки, обрезала, дальше надо сделать рамку вокруг видимой области, вот на этот вопрос и не нашла ответа, как сделать рамку |
Цитата:
Можно ещё сделать так... Цитата:
<!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>
|
| Часовой пояс GMT +3, время: 20:30. |