Скругленный треугольник с правой границей css

Как создать треугольник с закругленными вершинами? Ранее я создал квадрат с псевдоэлементом ::after и повернул его, что выглядело как ромб, а затем обрезал его, потому что не получил ожидаемого результата.

* {
  box-sizing: border-box
}
.price{
  width: 150px;
  height: 50px;
  background: #2d2d2d;
  color:#fff;
  align-items: center;
  display: flex;
  }
  
  .icon{
    font-size: 50px;
  }
  
  .items{
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 6px 0;
    justify-content:space-between
  }

<div class = "price">
  <span class = "icon">P</span>
  <div class = "items">
    <span class = "title">Total</span>
    <span class = "value">6 250</span>
  </div>
</div>

Вы можете использовать это? stackoverflow.com/questions/14446677/…

— 25.07.2019 16:09

@ManojKumar нет, это не подходит.

— 25.07.2019 16:22

@paulie-d paulie-d на самом деле это не сработает, потому что у меня нестандартное измерение, и ответы в примере не подходят.

— 25.07.2019 16:30

html css

25.07.2019 16:05

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

170

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете добавить новый div для стрелки и применить для него CSS.

См. Фрагмент ниже:

* {
  box-sizing: border-box
}
.price{
  width: 100px;
  height: 50px;
  background: #2d2d2d;
  color:#fff;
  align-items: center;
  display: flex;
  position:relative;
  }
  
  .icon{
    font-size: 50px;
  }
  
  .items{
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 6px 0;
    justify-content:space-between
  }
  
.arrow {
    position: absolute;
    background-color: #2d2d2d;
    text-align: left;
    top: 4px;
    right: -23px;
    transform: rotate(-90deg) skewX(-30deg) scale(1,.866);
}

.arrow:before,
.arrow:after {
    content: '';
    position: absolute;
    background-color: inherit;
}

.arrow,
.arrow:before,
.arrow:after {
    width: 28px;
    height: 28px;
    border-top-right-radius: 30%;
}
.arrow:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}

.arrow:after {
  transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

<div class = "price">
  <span class = "icon">P</span>
  <div class = "items">
    <span class = "title">Total</span>
    <span class = "value">6 250</span>
  </div>
<div class = "arrow">
</div>
</div>

как вы добавили ответ после 40 минут закрытия ??

— 25.07.2019 16:54

Я работал над решением, прежде чем пометил вопрос как дубликат. Так что я смог опубликовать его: D

— 25.07.2019 16:55

я бы сказал, нет проверки на стороне сервера;)

— 25.07.2019 16:57

25.07.2019 16:50