Блог

Главная - Вопросы по программированию - Проблема с использованием CSS для создания дугообразной кривой в макете дизайна

Проблема с использованием CSS для создания дугообразной кривой в макете дизайна

#css #css-transitions #user-experience

#css #css-переходы #пользовательский интерфейс

Вопрос:

Я работаю над дизайном карты, в которой мне нужно заставить красную / бордовую часть загибаться внутрь (от черной части) с помощью css. Пожалуйста, помогите?

HTML-разметка

  <div class="container phonecard2">
 </div>

<div class="btm-right">
</div>

Код CSS

 .container.phonecard2 {
    position: relative;
    background: #000;
    margin-top: 140px;
    width: 35%;
    height: 260px;
    padding: 20px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius: 15px;
}

.btm-right{
    position: absolute;
    width: 0;
    height: 0;
    bottom: 0;
    right:0;
    border-style: solid;
    border-width: 0 0 160px 450px;
    border-color: transparent transparent #ba0c2f transparent;
}

Изображение моего дизайна в формате PNG после приведенного выше кода
Изображение PNG после кода CSS

Комментарии:

1. можете ли вы поделиться изображением желаемого результата?

2. @UmerbinSiddique На данный момент у меня нет изображения,, но я хочу, чтобы верхняя граница красного треугольника (пересекающегося с черной частью) была изогнута внутрь / имела кривизну..

3. codepen.io/anon/pen/RdmJLJ вот так?

4. @UmerbinSiddique Нет,, я хочу, чтобы изгибающийся край / длинная граница, пересекающаяся с черной частью, изгибалась внутрь, образуя вогнутую форму

5. проверьте перо еще раз

Ответ №1:

 <div class="container phonecard2">
  <div class="btm-right"></div>
</div>
<style>
    .container.phonecard2 {
      position: relative;
      background: linear-gradient(to left, #ba0c2f 70%, #000000 30%);
      margin-top: 140px;
      width: 600px;
      height: 260px;
      padding: 20px;
      border-radius: 15px;
      overflow: hidden
    }

    .btm-right {
      position: absolute;
      background: #000;
      width: 800px;
      height: 680px;
      left: -130px;
      top: -330px;
      border-radius: 0 0 580px 0;
      transform: rotate(21deg);
    }
</style>