-1

I have the next code:

.App {
  display: flex;
  align-items: center;
}

img {
  height: 300px;
  border-top-left-radius: 105px 220px;
  border-bottom-left-radius: 105px 220px;
  width: 100%
}
.txt,
.img {
  width: 100%;
}
 <div class="App">
      <div class="txt">
        test test test testtest testtest test test test test testtest testtest
        test test test test testtest testtest test test test test testtest
        testtest test test test test testtest testtest test
      </div>
      <div class="img">
        <img src="https://wallpapercave.com/wp/wp4013881.jpg" />
      </div>
    </div>
But the corenrs are too rounded. I want to get something like this: enter image description here

How to get the expected result?

Asking
  • 3,487
  • 11
  • 51
  • 106
  • I don't think you can achieve that with simple css, or if you can it will be very very complicated and hard to read. I would suggest using a mask over the image to cover the left part and create this effect, and/or use an svg to mask it – Tasos Oct 29 '20 at 15:38
  • Nevermind, see my answer and let me know if it works for you – Tasos Oct 29 '20 at 15:42

1 Answers1

0

I've worked around it with reducing the height of the image container. It "cuts" the image top and bottom but I think it will work for you.

.App {
  display: flex;
  align-items: center;
}

img {
  height: 300px;
  border-top-left-radius: 105px 220px;
  border-bottom-left-radius: 105px 220px;
  width: 100%
}
.txt,
.img {
  width: 100%;
}

.img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
  overflow: hidden;
}
<div class="App">
      <div class="txt">
        test test test testtest testtest test test test test testtest testtest
        test test test test testtest testtest test test test test testtest
        testtest test test test test testtest testtest test
      </div>
      <div class="img">
        <img src="https://wallpapercave.com/wp/wp4013881.jpg" />
      </div>
    </div>
Tasos
  • 1,880
  • 13
  • 19
  • https://codesandbox.io/s/dawn-moon-6w4d6?file=/src/App.js:844-848, i use your answer to to what i want, could you take a look at this link and to give a solution to have the rounded borders one under one, so they should be every time connected. Thanks – Asking Oct 29 '20 at 16:45
  • could you help? – Asking Oct 29 '20 at 16:47
  • You should mess arroung with the width of the flex children. Take a look here: https://codesandbox.io/s/amazing-night-ems6n?file=/src/styles.css – Tasos Oct 30 '20 at 12:53