So i wanted to create a responsive trapezoid where you can apply a border and a background colour to it
I already created one using 3 div blocks but i cant get the border at the top of the trapezoid to stay inline when the width and height is changed
So my question is either.
can someone help me figure out how to keep the line at the top of the trapezoid in line with the left and right border
or if anybody knows of a different solution?
Here is my code....
.trapezoid-container{
position: relative;
margin-left: 100px;
width: 200px;
height: 200px;
}
.trapezoid {
background: green;
position: relative;
position:absolute;
content:"";
width: 70%;
height: 100%;
border-top: 5px solid black;
border-bottom: 5px solid black;
left: 20px;
}
.trapezoid:before {
background: green;
position:absolute;
content:"";
width: 60%;
height: 100%;
left: 63%;
border-right: 5px solid black;
border-bottom: 5px solid black;
transform: skew(20deg);
}
.trapezoid:after {
background: green;
position:absolute;
content:"";
width: 60%;
height: 100%;
left: -28%;
border-left: 5px solid black;
border-bottom: 5px solid black;
transform: skew(-20deg);
}
<div class="trapezoid-container">
<div class="trapezoid">
</div>
</div>
Thanks guys :)
A better solution found on How to draw a trapezium/trapezoid with css3? Which answers my question, thought id post it
#container {
position: relative;
margin-left: 200px;
width: 200px;
height: 200px;
}
.trapezoid {
position: relative;
width: 30%;
height: 50%;
background: red;
transform: perspective(2px) rotateX(1deg);
border: solid 4px black;
left: 20%;
top: 70%;
}
<div id="container">
<div class="trapezoid">
</div></div>
Related
I am trying to create something similar to a semi circle inside a rectangle something like this, the ellipse in the background.
expected design
I am able to implement the circle inside the rectangle but couldn't find a way to cut out the extra part of the ellipse, can someone please help me with achieving the required design?
achieved
.rectangle {
height: 110px;
width:200px;
background-color: #EDEDED;
border-radius: 9px;
position: relative;
}
position: absolute;
border-bottom: 1px solid black;
border-left: 1px solid gray;
width: 110px;
height: 110px;
border-radius: 999px;
right: 0;
bottom: 20px;
left: 100px;
You want to hide the part of the circle that overflows the rectangle
You can do this by setting overflow: hidden; on the rectangle.
.rectangle {
height: 110px;
width: 200px;
background-color: #EDEDED;
border-radius: 9px;
position: relative;
overflow: hidden;
}
.circle {
position: absolute;
border-bottom: 1px solid black;
border-left: 1px solid gray;
width: 110px;
height: 110px;
border-radius: 999px;
right: 0;
bottom: 20px;
left: 100px;
}
<div class="rectangle">
<div class="circle">
</div>
</div>
.rectangle{
height: 110px;
width:200px;
background-color: #313131;
border-radius: 9px;
position: relative;
overflow: hidden;
}
.circle{
position: absolute;
right: 3px;
top: 1px;
width: 93%;
height: 95%;
border-radius: 50%;
background: #404040;
}
.circle-border{
border-radius: 50%;
position: relative;
right: -129px;
top: -6px;
width: 41%;
height: 70%;
border: 2px solid #404040;
}
<div class="rectangle">
<div class="circle-border">
<div class="circle">
</div>
</div>
</div>
Please look at the image to understand what I am talking about. I have three box elements that look like what is displayed in the picture. What I want is for the green box to only be displayed overlapping the yellow and not displayed over overlapping the red. The green box needs to reside overlapping both but only visible over the yellow area. Ive tried using z-index, position and opacity in every different manner I could think of, but yet to come up with a solution.
link to image
<div id="one" ></div>
<div id="two" >
</div><div id="three" ></div>
#one{
border: solid 1px black;
width: 300px;
height: 300px;
background-color: red;
position: absolute;
}
#two{
margin-left: 50px;
border: solid 1px black;
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
}
#three{
border: solid 1px black;
width: 100px;
height: 100px;
background-color: green;
position: relative;
}
It's impossible to have elements overlap one layer and then go underneath another layer like you are asking. I know there is some art term for this.
Anyways here is the closest solution is to just fake it and have the green box inside the yellow box:
.outer {
width: 300px;
height: 300px;
position: relative;
outline: 1px solid black;
}
.green {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: -50px;
outline: 1px solid black;
background-color: green;
z-index: 3;
}
.yellow {
width: 200px;
height: 200px;
position: absolute;
left: 0;
right: 0;
top: 0;
margin: auto;
outline: 1px solid black;
background-color: yellow;
z-index: 2;
overflow: hidden;
}
.red {
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
outline: 1px solid black;
background-color: red;
z-index: 1;
}
<div class="outer">
<div class="yellow">
<div class="green"></div>
</div>
<div class="red"></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 6 years ago.
Improve this question
I would like to achieve something like this (Puttings the cercle and triangle in the borders of an html block).
Here's the css of my block:
.block {
color: red;
}
.cercle {
border-radius: 50%;
}
.triangle {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid red;
}
What you need to do is use absolute positioning, and instead of using borders use the CSS3's transform property.
Try this as an example:
.box {
padding: 50px;
border: 1px solid black;
display: inline-block;
}
.block {
background: red;
height: 100px;
width: 200px;
display: inline-block;
float: left;
position: relative;
border: 2px solid #880015;
}
.circle {
border-radius: 50%;
position: absolute;
width: 25px;
height: 25px;
background: red;
top: -12px;
right:-2px;
border: 2px solid #880015;
border-bottom: 0;
border-left: 0;
}
.triangle {
background: red;
position: absolute;
width: 20px;
height: 20px;
top: 5px;
right: -12px;
transform: rotate(45deg);
border: 2px solid #880015;
border-bottom: 0;
border-left: 0;
}
<div class="box">
<div class="block">
<div class="circle"></div>
<div class="triangle"></div>
</div>
</div>
Have a look at this article, it explains some of the features you are trying to achieve, but it involves solid images, rather than css only.
As a simpler solution, I suggest you to try with a DIV inside a DIV, and have all the content and the simple border in the inner div, and the custom elements (cercle, triangle) inside the outer div.
I made an example with an cicle, from here it should be easy enough to add other shapes.
html
<div class="wrapper">
<div class="square">
<div class="circle"></div>
</div>
</div>
css
.wrapper {
margin: 25px;
}
.square {
width: 300px;
height: 100px;
border: 5px solid red;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: pink;
position: absolute;
margin-left: 275px;
margin-top: -25px;
}
See https://jsfiddle.net/b8dthdwn/3/
You will need to use some HTML code first.
something like:
<div class="block">4
<div class="circle"></div>
<div class="triangle"></div>
</div>
And here is the CSS code:
.block {
background: red;
display: block;
width: 180px;
height: 90px;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
position: fixed;
top: 0.3px;
left: 170px;
z-index: 9999;
background: #000;
}
.triangle {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left:10px solid blue;
position:fixed;
top: 10px;
left: 187px;
}
You can use position: fixed to set the element position with top, left.
You can use z-index to make things to display above each other...
see example on jsbin
What i need to do is on image below:
I do not want use SVG at all. I think it is two divs with border-radius 50%. But how I merge them like on image? Can you solve this or give an advice?
This is a simpliest way to do it, may be you can improve it for your needs
#main {
width: 80px;
border-radius: 50%;
height: 80px;
border: 3px solid blue;
}
#background {
background: grey;
border-radius: 50%;
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
#small {
background: grey;
width: 30px;
border-radius: 50%;
height: 30px;
border: 3px solid blue;
margin-top: -30px;
margin-left: 50px;
}
<div id="main">
<div id="background"></div>
</div>
<div id="small"></div>
How could I center the blue box inside the red one ?
I see that the left side of the blue box is exactly in the middle of the red box, but I would like to center the whole blue box, not its left side. The dimensions of the boxes are not constant. I want to align regardless of boxes dimensions. Example to play with here. Thanks !
HTML:
<div id="rel">
<span id="abs">Why I'm not centered ?</span>
</div>
CSS:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}
If you're able to change the <span> tag to a <div>
<div id="rel">
<div id="abs">Why I'm not centered ?</div>
</div>
Then this piece of CSS should work.
#rel {
position: absolute;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center; }
#abs {
width: 300px;
height: 200px;
border: 1px solid blue;
margin: auto;
margin-top: 50px; }
I think it's better to use more automation for the enclosed box as less changes would be needed should you change the size of the container box.
You could add left:50px to #abs if that's all you want...
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
left:50px;
}
If you are going to define dimensions like that (200px x 300px and 300px x 400px), here's how it can be centered:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 49px 0 0 49px;
}
You can check at my solution here at http://jsfiddle.net/NN68Z/96/
I did the following to the css
#rel {
position: relative;
top: 10px;
left: 20px;
right: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#abs {
display: block;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
}
This should work
#abs {
position: absolute;
left: auto;
right: auto;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}