1

Как создать скругленный треугольник справа от элемента, как border или border-radius.

введите сюда описание изображения

* {
  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>

1

2 ответа 2

3

* {
  box-sizing: border-box;
}

.price {
  width: 150px;
  height: 50px;
  background: #5e5e5e;
  color: #fff;
  align-items: center;
  display: flex;
  position: relative;
  border-radius: 7px;
}

.icon {
  font-size: 50px;
}

.items {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 6px 0;
  justify-content: space-between;
}

.ar-right {
  position: absolute;
  height: 49px;
  width: 34px;
  overflow: hidden;
  right: -32px;
  margin-top: -1px;
}

.ar-right::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  right: 21px;
  background: #5e5e5e;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 7px;
}
<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="ar-right"></div>
</div>

https://jsfiddle.net/crus/h5n9rwdu/23/

Через дополнительный див <div class="ar-right"></div> с after-ом. Например, вот так вот. Стили на sass-е накидал на jsfiddle.

3
  • @CbIPoK2513, спасибо за помощь. 26 июл 2019 в 5:47
  • @KhujandNanocoding, благодарить нужно не меня, а пользователя Crus . Я всего лишь поправил его ответ)
    – De.Minov
    26 июл 2019 в 13:32
  • @Crus спасибо за помощь. 26 июл 2019 в 15:01
0

Как обычно на SVG

Что бы менять размер этой иконки - достаточно изменить width в теле SVG тега, к примеру вот так: https://codepen.io/topicstarter/pen/MNjmyN

<svg width="200" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
   <style>
    .big{
     font-family: sans-serif;
     font-size: 200px;
     text-transform: uppercase;
     fill:#fff;   
     font-weight: 800;
     }
     .text{
      fill: #fff;
      font-family: sans-serif;
      font-size: 80px;
      text-transform: uppercase;
      font-weight: 700;
     }
    </style>
  </defs>
  <path d="M20,0 550,0 595,90 Q600,100 595,110 L550,200 20,200 Q5,197 0,180 L0,20 Q5,0 20,0" />
  <text x="0"   y="170" class="big">p</text>
  <text x="150" y="85" class="text">total</text>
  <text x="150" y="170" class="text">6250</text>

</svg>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.