All geek questions in one place

Background color for div around all content inside

I am working on an arrow div. Currently, it looks like this:

enter image description here

div contains two other divs (two lines). And I want the background to be almost wrapped around the lines. But the height of the yellow background is much less than the height of the lines. I already tried "height: auto". Hope someone can help me.

#lineAll { background-color: yellow; height: auto; } #line1 { height: 2px; background-color: black; transform: rotate(35deg); width: 40px; } #line2 { height: 2px; background-color: black; transform: rotate(-35deg); width: 40px; margin-top: 20px; } 
 <div id="lineAll"> <div id="line1"></div> <div id="line2"></div> </div>

edit:

Width is also not the way I want. This is currently 100% screen width.

+5
source share
5 answers

Try the following:

 <div style="background-color : yellow; padding: 15px 0px; width: 40px;"> <div id="lineAll"> <div id="line1"></div> <div id="line2"></div> </div> </div> <style> #lineAll { background-color: yellow; height: auto; } #line1 { height: 2px; background-color: black; transform: rotate(35deg); width: 40px; } #line2 { height: 2px; background-color: black; transform: rotate(-35deg); width: 40px; margin-top: 20px; }

+3
source

You can do this with a single element and a pseudo-element :after . Just create a smaller pseudo-element that has border-top and border-right , and then rotate it for 45deg .

 .element { width: 50px; height: 60px; background: yellow; position: relative; } .element:after { content: ''; position: absolute; top: 15px; border-top: 1px solid black; border-right: 1px solid black; height: 30px; width: 30px; transform: rotate(45deg); } 
 <div class="element"></div>

To create another button, simply rotate it for -135deg and set right: 0px

 .element { width: 50px; height: 60px; background: yellow; position: relative; display: inline-block; margin: 50px; } .element:after { content: ''; position: absolute; top: 15px; border-top: 1px solid black; border-right: 1px solid black; height: 30px; width: 30px; transform: rotate(45deg); } .element.right:after { transform: rotate(-135deg); right: 0px; } 
 <div class="element"></div> <div class="element right"></div>
+1
source

Why don't you try drawing a triangular shape using css , as it gives the same result that you want to achieve

 .triangle { display: block; width: 0; height: 0; border-top: 108px solid transparent; border-right: 0 solid transparent; border-bottom: 108px solid transparent; border-left: 108px solid #4abdac; } 
 <html> <head></head> <body> <div class="triangle"></div> </body> </html>
0
source

try it

 #lineAll { background-color: yellow; height: auto; padding: 10px 0; }

live demo - https://jsfiddle.net/grinmax_/j4aza1om/

0
source

Just use

 overflow: hidden; display: inline-block; 

 #lineAll { background-color: yellow; overflow: hidden; display: inline-block; } #line1 { height: 2px; background-color: black; transform: rotate(35deg); width: 40px; } #line2 { height: 2px; background-color: black; transform: rotate(-35deg); width: 40px; margin-top: 20px; } 
 <div id="lineAll"> <div id="line1"></div> <div id="line2"></div> </div>
0
source

Source: https://habr.com/ru/post/1264988/

More articles:


All Articles