no__name

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

Recommended Posts

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

block.png

Share this post


Link to post
Share on other sites

Ну или 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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,439
    Total Members
    3,128
    Most Online
    Talomir
    Newest Member
    Talomir
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.