Вопросы Теги

Как сгенерировать эту фигуру в CSS?

Я хочу реализовать div в форме, показанной на следующем рисунке ...

introducir la descripción de la imagen aquí

... но я бы хотел сделать это без изображений, просто CSS . Я тестировал с clip-path, но можно сделать только прямые линии или окружности. Я использовал псевдоклассы, такие как after и before, но я не могу получить правильную форму.

Как выполнить эту форму в CSS , без необходимости изображений?

Я пытался выполнить эту форму следующим образом: 

body {
  background-color: #F7F0D0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inverted-border-radius {
  position: relative;
  height: 100px;
  width: 325px;
  background-color: #F66969;
  border-radius: 25px 25px 25px 0;
}

.inverted-border-radius::before {
  content: "";
  position: absolute;
  
  background-color: transparent;
  bottom: -50px;
  height: 50px;
  width: 25px;
  border-top-left-radius: 25px;
  box-shadow: 0 -25px 0 0 #F66969;
}



    
    
    
    Border inverted

Таким образом, я получаю верхнюю правую кривую и верхнюю левую кривую, получая ее, давая ей border-radius на этом кончике, но наклон я все еще не знаю Как это сделать С clip-path фигура проигрывает border-radius.

6
задан 30.11.2019, 03:27
2 ответа

Ты можешь играть с положениями контейнеров, которые ты не выбираешь, div, span, и т.д. абсолютно и относительно colocГЎndolos, как ты хотел, и давать ему background вышеупомянутым контейнерам с цветом, который у них должен быть, чтобы позже давать им форму с например "border-radius" и width и height конкретные, имея в виду, что comenzarГЎ из-за верхнего левого угла объекта описывая moviento как moviento стрелок часов, оставаясь таким образом asГ - в этом примере: 

.forma{
    position:relative;
    top:2em;
    left:3em;
    width:5em;
    height:5em;
    border-radius: 10px 30px 15px 150px;
    background-color:#ccc;
    border:2px solid red;
}
<div class="forma">&nbsp;</div>
3
ответ дан 01.12.2019, 10:39

Ты мог пробовать это со свойством clip-path и создавая один polГ-gono таким образом: 

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
      <style>
        .figura-rara {
          background-color: steelblue;
          height: 200px;
          clip-path: polygon(0% 30%, 100% 0%, 100% 100%, 0% 100%);
        }
      </style>
    </head>
    <body>
    <div class="figura-rara">
      
    </div>
    </body>
    </html>

Замечаний

  • Давайте Верить с помощью div в один polГ-gono, что выполнил следующие правила:

    • из верхнего левого конца мы отделяем polГ-gono 30 %, чтобы добиваться ее lГ-nea от серьги
    • Следующая пара стоимости, они помогают нам поддерживать фигуру, прикрепленную к верхнему прямому углу
    • Следующая пара стоимости мы оставляем ее как 100 % и у 0 %, чтобы нам удается, была большая высота что Ваш противоположный конец и не отделило нижнего прямого угла
    • равной Гєltima процентного содержания помощь поддерживать фигуру, прикрепленную к нижнему левому углу

Общеизвестной: AГєn я не встречаю ответа, чтобы производить эффект края углов

1
ответ дан 01.12.2019, 10:39

Теги

Похожие вопросы