Прямо сериал получается...
А поиск картинок в таком случае можно было использовать https://www.google.us/search?q=transparent+color+wheel, раз это просто пример содержания страницы... |
laimas,
:thanks: |
Malleys,
вот если бы подобное можно было нарисовать чисто на html/css, но как эту окружность залить градиентом ума не приложу |
Блондинка, не получится у вас наложить индексированную палитру с прозрачным цветом на любой фон, зазубрены будут видны. Либо PNG24, либо определиться сначала с фоном, затем наложить на него PNG24, а уже результат сохранить в индексированной палитре, вот тогда зазубрены будут маскироваться. Такое делают ради уменьшения веса изображения.
|
laimas,
зазубрины можно спрятать наложив на изображение два прозрачных див'а с рамкой нужного цвета и закругленными углами 50%, ну тоесть наложить два круга нужного цвета внутри окружности и снаружи |
Цитата:
Хотели бы я посмотреть как вы решите слоями данную проблему, и самое интересное, это на цифрах ;) |
laimas,
просто пытаюсь найти варианты спрятать зазубрины, чтобы просто знать выход из подобной ситуации, не факт что придется это делать, короче пытаюсь учиться |
laimas,
вроде я права, без изображения чисто на хтмл/цсс не получиться нарисовать окружность и залить градиентом? |
Цитата:
|
laimas,
немного не так, правильнее будет как принести воды в сите если нет ведра под рукой |
Цитата:
<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, время: 13:51. |