Jump to content
  • Sign Up
no__name

Стрелка с вогнутыми гранями

Recommended Posts

Доброго времени суток, господа. Не подскажете как можно сверстать блок с такой стрелкой?

block.png

Share this post


Link to post
Share on other sites

Как вариант:

<div class="box">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, velit non ipsa rem dolorum unde fuga repudiandae iusto nesciunt numquam dolores tenetur soluta ad in aut fugit ea tempora ipsum!
</div>
.box {
  width: 300px;
  background: red;
  border-radius: 10px;
  padding: 10px;
  position: relative;
}
.box:before,
.box:after {
  content: "";
  height: 35px;
  width: 20%;
  position: absolute;
  top: 100%;
  left: 50%;
  background: radial-gradient(
    at 25% 100%,
    transparent,
    transparent 75%,
    red 75%,
    red
  );
}
.box:before {
  transform: translateX(-100%);
}
.box:after {
  transform: rotateY(180deg);
}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Member Statistics

    46,884
    Total Members
    1,451
    Most Online
    yalstudio
    Newest Member
    yalstudio
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Мы приглашаем в нашу команду опытного верстальщика для работы над клиентскими проектами. Что предстоит делать: Кроссбраузерная адаптивная вёрстка сайтов и отдельных web-страниц по предоставленным макетам; Кроссбраузерная адаптивная вёрстка сайтов и отдельных web-страниц по предоставленным макетам (ps, figma); Поддержка и доработка frontend-части действующих сайтов; Вёрстка писем. Требования: Экспертное владение CSS3, HTML5; Знание Photoshop достаточное для верстки макетов; Навыки кроссбраузерной, адаптивной верстки; Отличные знания JS, технологий Ajax, JSON; Хорошее знание jQuery, Bootstrap https://www.yalstudio.ru/company/vacancy/.  о нас и работев нашей компании
    • Оптимизированный хостинг для проектов на Bitrix: Управление сайтом Владельцы и администраторы сайтов на CMS Bitrix знают, что при всех преимуществах данной системы управления контентом важно правильно выбрать хостинг, так как она достаточно требовательна к ресурсам. Обычный shared-хостинг не всегда отвечает требованиям производительности, в особенности, когда речь идет об интернет-магазине с сотнями товарных единиц (SKU) и существенным потоком трафика. Пользователи не могут нормально взаимодействовать с контентом и просто покидают сайт, недовольные скоростью его работы. В результате владельцы теряют потенциальных покупателей, а с ними и возможную прибыль. Мы поставили перед собой задачу предоставить владельцам сайтов сервис, адаптированный под Bitrix: Управление сайтом, способный быстро и стабильно работать при большом количестве трафика и с большим объемом информации. Что из этого получилось, читайте в статье.
    • Более подробно о тестовом периоде здесь  ,могу сказать что это очень полезно для людей который изначально хотят проверить продукт
  • Popular Contributors

×
×
  • Create New...