Crystal-3

Закруглённые треугольники с полупрозрачным фоном

Recommended Posts

Всем привет.
Озадачил меня дизайнер, ничего хорошего не могу придумать, гугл тоже отказывается помогать.
Нужно сделать вот такие штуки http://prntscr.com/nsyswi
Задача усложнена ещё тем, что фон должен быть пролупрозрачный.
Буду благодарна за подсказку.

Share this post


Link to post
Share on other sites

Мое извращение:

Нужные размеры можно либо подобрать, либо использовать JS для автоматизации. Но, имхо, лучше с SVG разобраться, так как в моем примере не получится залить полупрозрачным фоном 

See the Pen pmqBMv by Alexandr (@AlexZaw) on CodePen.

<div class="wrap">
  <ul>
    <li>
      <div class="el">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, cumque? lorem lorem lorem lorem lorem lorem</div><span></span>
    </li>
    <li>
      <div class="el">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, cumque? lorem lorem lorem</div>
    <span></span></li>
  </ul>
</div>
*, :before, :after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrap{
  background: url(http://placekitten.com/1000);
}
ul{
  margin: 50px;
  list-style: none;
  display: inline-block;
}
li{
  margin-bottom: 30px;
  position: relative;
}
.el{
  position: relative;
  padding: 10px;
}
.el:before,.el:after, li:before,li:after,span:before,span:after{
  content: '';
  position: absolute;
  height: 100%;
  width: calc(50% - 40px);
  top: 0;
  border: 2px solid #ccc;  
}
.el:before{
  border-radius: 50px 0 0 50px;
  border-right: none;
  left: 0;
}
.el:after{
  right: 0;
  border-left: none;
  border-radius: 0 50px 50px 0;
}
li:before,li:after,span:before,span:after{
  width: 50px;
  top: calc(-100% + 2px);
  left: 50%;
  transform: translateX(calc(-100% + 2px));
  border: 2px solid #ccc;
  border-radius: 0 0 50% 0;
  border-top: none;
  border-right: none;
  border-left: none;

}
li:after{
  transform: scaleX(-1);
}
span{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
span:before{
  top: calc(100% - 2px);
  transform: translateX(calc(-100% + 2px)) scaleY(-1);
}
span:after{
  top: calc(100% - 2px);
  transform: scale(-1,-1);
}

 

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,335
    Total Members
    3,128
    Most Online
    Витольд Магикан
    Newest Member
    Витольд Магикан
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.