I need help with creating shapes in HTML/CSS as separators between one section of a website to another.
this is how it should look like :
There's an image at the top and content at the bottom and I need to draw those shapes.
help please :)
The way you have asked this question really isn't the best however this should help you head in the right direction:
https://jsfiddle.net/m6aoLw9f/5/
HTML
<div class="bluebox"></div>
<div class="blueline"></div>
css
.bluebox {
position: absolute;
top: 10%;
left: 10%;
height: 20px;
width: 200px;
background-color: blue;
opacity: 0.5;
transform: skew(-5deg, -5deg);
}
.blueline{
position: absolute;
top: 12%;
left: 8%;
height: 2px;
width: 250px;
background-color: blue;
opacity: 0.5;
transform: skew(-5deg, -5deg);
}
Related
I want to create rectangles on my web page to replicate lasers. I have tried to put it at the bottom of the page:
.laser {
width: 5px;
position: absolute;
transform: translate(-100%, -100%);
bottom: 0px;
}
<div class='laser' style='color: red; left: 10%; height: 200px;'></div>
<div class='laser' style='color: green; left: 20%; height: 150px;'></div>
but it does not show up on my screen. My best guess is that the div is aligned via the top left corner so the box is under the screen? Yet when I try to translate it nothing happens as well.
change color to background-color
.laser {
width: 5px;
position: absolute;
//transform: translate(-100%, -100%);
bottom:0;
}
<div class='laser' style='background-color: red; left: 10%; height: 200px;'></div>
<div class='laser' style='background-color: green; left: 20%; height: 150px;'></div>
I have an image with a CSS overlay that slides up from the bottom, and it's on the left. I want it in the center. Also, I hate to admit it, but the other post doesn't help. I got a post suggestion(IDK why), but I don't see how it helps me. I'm not super familiar with this and what I'm doing is for a project in a class of mine, which is late, and I'm trying to shoot for extra credit.
I just want to know how to make it go to the center. I have tried moving it to the left by 25, 50, and 75%, same with the right. It just won't move. Here is the code:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 50%;
height: auto;
}
/* This is what I have been using with to move it. */
.overlay {
position: absolute;
bottom: 0;
left: 0;
/* This will move wherever */
right: 0;
background-color: darkblue;
overflow: hidden;
width: 50%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: red;
font-size: 20px;
font-family: cursive;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img src="image is here" alt="Avatar" class="image"> This won't move
<div class="overlay">
<div class="text"><u>This is just here atm</u></div>
</div>
</div>
I solved it. I just needed to use the "center" tag and put my style tag in it. Moved the overlay and it was fixed.
I currently need to make something with CSS that would look like this:
I managed to do it with this:
.top {
position: relative;
}
.top .gray-bar {
position: absolute;
width: 100%;
height: 50px;
background-color: #cdcbcc;
-ms-transform: rotate(1.2deg);
transform: rotate(1.2deg);
margin-top: -25px;
z-index: 2;
}
.top .cyan-bar {
position: absolute;
width: 100%;
height: 90px;
background-color: #2ca1ab;
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
z-index: 1;
margin-top: -30px;
margin-left: -400px;
}
.top .purple-bar {
position: absolute;
width: 100%;
height: 50px;
background-color: #b71e4c;
-ms-transform: rotate(0.7deg);
transform: rotate(0.7deg);
margin-top: -5px;
z-index: 0;
}
<div class="top">
<div class="gray-bar"></div>
<div class="cyan-bar"></div>
<div class="purple-bar"></div>
</div>
However, when I resize my window, at some point of time, the "cyan" triangle is causing issue because of the margins and the rotation. Therefore, I added some media queries to modify the rotation angle depending on the width of the screen but I feel that it's a bit "playing around" and that there is a better solution to achieve this.
I tried using borders to make the overlapping triangles but as it cannot be expressed as percentage, I'm a bit stuck. Indeed, the goal is that the result looks about the same whatever the user's screen resolution.
Is there a better solution than mine ?
Considering that the .top element uses the full viewport width, you can use viewport percentage units for the borders. This will make the triangles relative to the viewport width.
See this example with one div :
body,html{margin:0;padding:0;}
.topBar{
position:relative;
height:35px;
border-bottom:30px solid transparent;
border-right:100vw solid #B71E4C;
}
.topBar:before, .topBar:after{
content:'';
position:absolute;
top:0; left:0;
height:15px;
}
.topBar:before{
border-bottom:50px solid transparent;
border-left:100vw solid #2CA1AB;
}
.topBar:after{
border-bottom:40px solid transparent;
border-right:100vw solid #CDCBCC;
}
<div class="topBar"></div>
Maybe this help you, but, #web-tiki its the best solution, using pseudo-selectors: :before & :after
.top {
overflow: hidden;
height: 90px;
}
.top .gray-bar {
position: relative;
width: 100%;
height: 50px;
background-color:#cdcbcc;
-ms-transform: rotate(1.3deg);
transform: rotate(1.3deg);
margin-top:-35px;
z-index: 2;
}
.top .cyan-bar {
position: relative;
width: 150%;
height: 50px;
background-color:#2ca1ab;
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
z-index:1;
top: -5px;
margin-top:-30px;
margin-left:-100px;
}
.top .purple-bar {
position: relative;
width: 100%;
height: 20px;
background-color:#b71e4c;
-ms-transform: rotate(0.7deg);
transform: rotate(0.7deg);
margin-top: -20px;
z-index:0;
}
<div class="top">
<div class="gray-bar"></div>
<div class="cyan-bar"></div>
<div class="purple-bar"></div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have recently started to code again after a long break and now I'm trying hard to see what is it that I'm doing wrong.
I made a JSFiddle here: http://jsfiddle.net/mtsgp3gg/
This is the output I'd like to see: http://puu.sh/jwi3d/233c917986.png
I have a container with 3 images:
<div class="container">
<img src="main picture">
<img id="tape left" src="">
<img id="tape right" src="">
</div>
I would like to put some little "tape thingies" over my main picture using position: relative; and top:0; but so far I failed.
Can anyone point out what I'm doing wrong please?
css position: is somewhat confusing, especially at the start (and it is misused almost 99% of all times).
You use position: relative because you want it to be relative to the container, right? Although this is the obvious behavior, it is not what css does.
position: relative means "I'll give you top/right/... values and want that the element is moved by that amount from where it would occur normally."
You almost always want to use position: absolute which basically means "pick the boundaries of the parent (being specific: the first parent that is not position: static which is the default) and move this element to what I define with top/right/...". (There are more implications like absolute removing the element from the document flow, but that's out of scope at the moment.)
This means you have to
position your container not static. position: relative works fine here, as it does not alter the element if you don't specify top/... .
position your items with position: absolute as they will then be defined relative to their container (not relative to their original position, as they would be with position: relative).
Your example would look like
body {
background: gray;
}
.container {
position: relative;
margin-left: 20px;
margin-top: 20px;
width: 200px;
height: 200px;
background: navy;
}
.container [id] {
position: absolute;
top: -5px;
}
.container #one {
left: -5px;
}
.container #two {
right: -5px;
transform: rotate(90deg);
}
<div class="container">
<img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg">
<img id="one" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png">
<img id="two" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png">
</div>
You're using position:relative when you should be using position:absolute.
body {
background: gray;
}
.container {
margin-left: 20px;
margin-top: 20px;
width: 200px;
height: 200px;
background: navy;
position: relative;
}
.container #one {
position: absolute;
top: 0;
left: 0;
transform: translate(-25%, -25%)
}
.container #two {
position: absolute;
top: 0;
left: 100%;
transform: translate(-75%, -25%) rotate(90deg);
}
<div class="container">
<img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg" />
<img id="one" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png" />
<img id="two" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png" />
</div>
That said, I'd prefer not to have presentational images in the HTML at all. So I'd be using pseudo-elements using the same techniques.
body {
background: gray;
}
.container {
margin-left: 20px;
margin-top: 20px;
width: 200px;
height: 200px;
background: navy;
position: relative;
}
.container::before {
position: absolute;
content: '';
width: 20px;
height: 20px;
background-image: url(http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png);
top: 0;
left: 0;
transform: translate(-25%, -25%);
z-index: 1;
}
.container::after {
position: absolute;
content: '';
width: 20px;
height: 20px;
background-image: url(http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png);
top: 0;
left: 100%;
transform: translate(-75%, -25%) rotate(90deg);
}
<div class="container">
<img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg" />
</div>
In this way, the presentational part is now in the CSS and the class can be re-used without having multiple instances of the tape image cluttering up your HTML.
Try to use position: absolute; instead of position: relative;
.container #one{
position: absolute;
top: 10px;
left:20px;
}
.container #two{
position: absolute;
top: 10px;
left:215px;
transform: rotate(90deg);
}
Demo here
For a site I am making I want to have a nice rotated "navigation" bar, just simple links really at the top of the page.
The code I have got:
div.home
{
position: absolute;
top: 0px;
left: 700px;
height: 150px;
width: 40px;
background-color: #313131;
-webkit-transform: rotate(45deg);
margin-top: -36px;
text-transform: rotate(45deg);
}
And:
<div class="home">
Home
</div>
This makes the text bunch up at the top of the element. Ideally I want it to be at the bottom of the element,
I don't Know what exactly you want but these maybe helpful
<div class="home">
<div class="text">
Home
</div>
</div>
div.home
{
position: absolute;
top: 30px;
left: 700px;
height: 150px;
width: 40px;
background-color: #313131;
-webkit-transform: rotate(45deg);
margin-top: -36px;
-webkit-text-transform: rotate(90deg);
}
.text{
margin-top:100px;
font-size:26px;
-webkit-transform: rotate(-90deg);
color:white;
}
DEMO
Don't transform the text. transform (and -ms-transform, -webkit-transform and so on) include rotating text with it and receive mouse events in the new position.
I don't know if this is exactly what you're having trouble with but change the top value to something like '30px'.
Demo