I'm attempting to devise the design displayed in the link below:
https://i.sstatic.net/n0ZbB.png
I have experimented with the following code:
.App {
font-family: sans-serif;
text-align: center;
}
#container {
height: 300px;
width: 300px;
overflow: hidden;
background-image: url(https://i.ytimg.com/vi/Vp7nW2SP6H8/maxresdefault.jpg);
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 300px solid white;
border-right: 300px solid transparent;
}
#text {
position: absolute;
top: 30px;
width: 200px;
}<div class="App">
<div id="container">
<div id="triangle-topleft">
<p id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut bibendum justo
</p>
</div>
</div>sandbox However, this method fails to adapt to different screen sizes. I aim to divide a div into two diagonal sections.
The end goal is to have a div that is split diagonally, each containing data within them.
How could I go about achieving this?
UPDATE: I also tested using the clip-path property. (sandbox) Yet, it still requires me to utilize position:absolute.