Создавать фигуры с помощью css

Carlos спросил: 28 апреля 2018 в 08:29 в: html
.shape {
    width: 200px;
    height: 50px;
    background-color: green;
    border-radius: 10px 10px 0 30px;
    transform: skewX(0);
}

<div class="shape">Hello World!</div>

У нас есть две следующие формы в формате jpg. Но при определенном условии фон и цвет границы должны меняться до какого-то другого цвета. Поэтому идея состоит в том, чтобы создать эти изображения с помощью CSS transform Property (если возможно).

{   width: 200px;
    height: 50px;
    background-color: green;
    border-radius: 10px 10px 0 30px;
    transform: skewX(0);
}


3 ответа

Есть решение
Gautam Naik ответил: 28 апреля 2018 в 09:29

Использование SVG

.a {
  fill: #ef0c4d;
  stroke: #999;
  stroke-miterlimit: 10;
  stroke-width: 7px;
}

.a:hover {
  fill: green;
  stroke: blue;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680.4 240.3">
<path class="a" d="M135,113.1s7.7,123.6,13.5,164.4c6.3,44.5,13,64,168,64h490L737.7,184.3a5.6,5.6,0,0,0-4.2-3.2L140.1,108.2A4.5,4.5,0,0,0,135,113.1Z" transform="translate(-131.4 -104.7)"/>
</svg>

Использование CSS

.rect {
    width: 230px;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.rect:before {
  content: " ";
    position: absolute;
    width: 200px;
    height: 50px;
    background: #dedede;
    border-bottom-left-radius: 26px;
    right: 30px;
    bottom: 0;
}

.rect:after {
  content: " ";
    position: absolute;
    width: 250px;
    height: 50px;
    background: #dedede;
    transform: rotate(10deg) skew(30deg);
    bottom: 20px;
    left: -38px;
}
<div class="rect"></div>
Carlos ответил: 28 апреля 2018 в 10:04
Прежде всего спасибо. Я прошу одного решения, которое вы мне дали. Можете ли вы дать мне больше информации о том, как вы измеряли путь для SVG. Любой инструмент
Gautam Naik ответил: 28 апреля 2018 в 10:24
@Carlos Вы можете использовать бесплатный инструмент inkscape link
Gautam Naik ответил: 28 апреля 2018 в 10:26
@Carlos Если у вас есть подписка adobe, то используйте иллюстратор. Оба инструмента позволят экспортировать в svg. Тогда вы можете скопировать код svg в html
Gautam Naik ответил: 29 апреля 2018 в 08:33
@ Карлос, если этот ответ поможет u, тогда, пожалуйста, примите его
Temani Afif ответил: 28 апреля 2018 в 09:09

Будет проще работать с SVG, чем чистый CSS, вот пример:

path {
    fill:pink;
}
path:hover {
  fill:red;
  stroke:#000;
}
<svg
  xmlns='http://www.w3.org/2000/svg'
  viewBox='0 0 64 64'
  width='200' >
  <path d='M18 48 L56 48 L46 30 L12 16 C8 14 8 16 8 18 L8 40 C8 44 10 48 14 48 Z' />
</svg>

Вы можете рассмотреть эту ссылку, чтобы легко отрегулировать форму http://jxnblk.com/paths/?d=M18 48 L56 48 L46 30 L12 16 C8 14 8 16 8 18 L8 40 C8 44 10 48 14 48 Z

NightPorter ответил: 28 апреля 2018 в 09:07

Каковы "определенные условия"? Если вы хотите изменить цвет изображения при наведении на чистый CSS, простым способом было бы установить изображение в качестве фона элемента div. Затем вы создадите второе идентичное изображение (с новым цветом) для изменения.

HTML -

<div id="color-1"></div>

и CSS

#color-1 {
    width:500px;
    height:200px;
    background-image:url('some/image/path');
} #color-1:hover {
    background-image:url('some-other/image/path');
}