Schräge Striche in die Webseite bekommen
Hey,
wie bekomme ich denn schräge Striche in meine HTML-Seite. Habe es bereits mit <hr> probiert und transform: rotate(); aber dies funktioniert nicht so wie ich es mir wünsche.
Habe ebenso mal die Linien als Bild erstellt, aber das ist auch nicht das richtige.
Mein Ziel ist es, so wie auf dem mit hochgeladenen Bild es hinzubekommen. Darüber hinaus sollte es auch responsive anpassbar sein.
Hoffe, ihr könnt mir helfen.
Der hier verwendete Code
<h1>
Lösung 1</h1>
<iframe style="height:400px;width:100%" srcdoc='<style>
#a{
position:absolute;
left:100px;
top:100px;
width:200px;
height:10px;
transform:rotate(45deg);
background:red;
}
#b{
position:absolute;
left:233px;
top:100px;
width:200px;
height:10px;
transform:rotate(-45deg);
background:red;
}
</style>
<div id="a">
</div>
<div id="b">
</div>'></iframe>
<h1>
Lösung 2
</h1>
<iframe style="height:400px;width:100%" srcdoc='<style>
#conti{
position:absolute;
top:10vw;
left:10vw;
display:inline-block;
width:70vw;
height:70vw;
background:yellow;
}
#a{
position:relative;
left:5vw;
top:19vw;
width:40vw;
height:1vw;
transform:rotate(45deg);
background:red;
}
#b{
position:absolute;
left:34vw;
top:19vw;
width:40vw;
height:1vw;
transform:rotate(-45deg);
background:red;
}
</style>
<div id="conti">
<div id="a">
</div>
<div id="b">
</div></div>'></iframe>
<h1>
Lösung 3</h1>
<iframe style="height:400px;width:100%" srcdoc='<style>
.container {
width:98vw;
height: 98vh;
position: absolute;
}
.triangle {
position: absolute;
margin: auto;
top: -220px;
left: -10px;
right: 0;
width: 60vw;
height:60vw;
transform: rotate(45deg);
border-right: 4px solid #e74c3c;
border-bottom: 4px solid #e74c3c;
}
</style>
<div class="container">
<div class="triangle"></div>
</div>
'></iframe>