Question 286368 in Html Question posted in
Some basic documentation can be found here.

Html – How to design a curved vertices on triangle using CSS

I would try to design the similar kind of curved triangle design using css.

enter image description here

But I only able to got this kind of design.
enter image description here

Those are the css I used for

.contact {
  display: flex;
  position: relative;
  background-color: #aa76ed;
  height: 330px;
  border-radius: 30px;
  z-index: 1;
}

.triangle {
  position: absolute;
  display: block;
  top: 0;
  width: 100%;
  height: 150%;
  background: rgba(255, 255, 255, 0.1);
  z-index: 0;
  clip-path: polygon(0% 100%, 50% 50%, 100% 100%, 0% 100%);
  transform: rotate(180deg);
  border: inherit;
  border-radius: 0 0 0 0.25em;
}

.contact .left-aside {
  width: 33%;
  height: 100%;
}
.contact .right-aside {
  width: 66%;
  color: #ffffffcc;
  vertical-align: middle;
}

.contact .right-aside h3 {
  font-size: 200%;
}
<div class="contact">
          <div class="triangle"></div>
          <div class="left-aside">
            <img src="#" />
          </div>
          <div class="right-aside">
            <h3 class="question">Have any Question on Mind?</h3>
            <p class="business-project">
              Let's Talk About your Business and Project.
            </p>
            <input type="input" />
            <a href="#" class="lets-talk">Let's Talk</a>
          </div>
   </div>

I tried below stackoverflow answer and codepen but i can’t achieve it, if someone can explain it with an answer would be very helpful.

border radius top left on triangle using CSS

https://codepen.io/codyhouse/pen/axryOB

Tags:

2

Answers


  1. 0

    Hide half on the top…

    <div class="almost_triangle"></div>

    .almost_triangle{
    width: 100px;
    height: 100px;
    transform: rotate(135deg) skew(10deg, 10deg);
    background: #456987;
    border-radius:10px;
    }

    … and

    border radius top left on triangle using CSS

    Login or Signup to reply.
  2. 0

    A clip-path based on a polygon won’t give you a curved corner. I think the simplest solution is to use an SVG background image.

    .contact {
  background-color: #aa76ed;
  height: 330px;
  border-radius: 30px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M 46.328 48.186 C 48.776 50.604 51.224 50.604 53.671 48.186 L 100 0 L 0 0 L 46.328 48.186 Z" style="fill: rgba(255, 255, 255, 0.1);"/></svg>');
  background-size: 100% 75%;
  background-repeat: no-repeat;
}
    <div class="contact"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search