Fiddle here
I have two separate labels I want to appear as one.
the CSS looks like this
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #e0b76d;
}
.label-main-first {
position: absolute;
width: 10%;
height: 10%;
top: 50%;
left: 40%;
transform: translate(-40%, -50%);
border: 5px solid green;
border-right: none;
}
/*#a27f40*/
.label-main-second{
position: absolute;
width: 10%;
height: 10%;
top: 50%;
left: 60%;
transform: translate(-60%, -50%);
border: 5px solid yellow;
border-left: none;
}
This creates a gap between the two labels.
Both labels has a width a 10%.
The first label is pushed 40% from the left, while the other label is pushed 60% from the right.
The difference is 20% which is the total width of both labels.
Why am I getting the gap between them?
The left value is the percentage of the wrapper (body in this case).
The percentage in translate is the percentage of its own width.
The second label starts at the middle, so it does not require X value for translate. transform: translate(0%, -50%);
The first label need to translate 100% of its width to the left. transform: translate(-100%, -50%);
The below code helps to align all in the center in properly.
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #e0b76d;
}
.label-main-first {
position: absolute;
width: 10%;
height: 10%;
top: 50%;
left: 50%;
transform: translate(-100%, -50%);
border: 5px solid green;
border-right: none;
}
/*#a27f40*/
.label-main-second{
position: absolute;
width: 10%;
height: 10%;
top: 50%;
left: 50%;
transform: translate(0%, -50%);
border: 5px solid yellow;
border-left: none;
}
<label for="input-main" class="label-main-first"></label>
<label for="input-main" class="label-main-second"></label>
I am not sure over the goals that you have by using these style, but will suggest more one solution a bit simpler, https://jsfiddle.net/unb3n8s1/1/
hope it will work for your purposes also.
<div class="wrapper"><label for="input-main" class="label-main-first"></label>
<label for="input-main" class="label-main-second"></label></div>
you can change width, height and also set position absolute for wrapper, instead of each label.
Here is Variant with percents: https://jsfiddle.net/unb3n8s1/2/
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #e0b76d;
}
.wrapper {
width: 20%;
height: 10%;
position: absolute;
top: 45%;
left: 40%;
}
label {
display: block;
box-sizing: border-box;
float: left;
width: 50%;
height: 100%;
}
.label-main-first {
border: 5px solid green;
border-right: none;
}
/*#a27f40*/
.label-main-second{
border: 5px solid yellow;
border-left: none;
}
i think it's simply because the first label has left value of 40% and width of 10%
so the second label should have left value of 50% instead of 60%
Related
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 1 year ago.
I am trying to create rectangular button with a circle and right arrow inside it. I have tried few things but couldn't get them centered. Also this were using top and bottom properties of the page whereas I want them to be independent of the page properties and center them with respect to rectangle. Below is the code I am using.
.rectangle {
box-sizing: border-box;
display: inline-block;
width: 200px;
height: 100px;
border: 1px solid #ccc;
border-radius: 5px;
position: relative;
padding-box;
background: lightgreen;
opacity: 1;
}
.rectangle:before {
content: '';
border-radius: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
background: lightseagreen;
box-shadow: 0px 2px 48px #00000029;
opacity: 1;
}
.rectangle:after {
content: '';
display: inline-block;
margin-top: 1.05em;
margin-left: 1.05em;
width: 23px;
height: 23px;
border-top: 4px solid #333;
border-right: 4px solid #333;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
<div class="rectangle"></div>
A couple of observations.
If you want to center an element then placing it in the center of its parent and then translating it by minus half its width and height works. This is what you are doing in the Y direction with the circle, but you have omitted to do it in the X direction.
We need to do more or less the same for the arrow but to get it centered you need to move it another 25% back to the left as it's not the center of the element you are interested in but the center of the rotated right hand part. Also note that the order of doing the transforms matters here as we have a rotation to include.
.rectangle {
box-sizing: border-box;
display: inline-block;
width: 200px;
height:100px;
border:1px solid #ccc;
border-radius: 5px;
position: relative;
padding-box;
background: lightgreen;
opacity: 1;
}
.rectangle::before {
content: '';
border-radius: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background:lightseagreen;
box-shadow: 0px 2px 48px #00000029;
opacity: 1;
}
.rectangle::after {
content: '';
display: inline-block;
position: absolute;
width: 23px;
height: 23px;
border-top: 4px solid #333;
border-right: 4px solid #333;
top: 50%;
left: 50%;
transform: translate(-75%, -50%) rotate(45deg) ;
box-sizing: border-box;
}
<div class="rectangle"></div>
I am doing a this challenge on CSS Battle and get a very thin border around the rotated div object. Why is that? How can I get rid of it? When I submit it on the website it also scores only 98.somewhat %, so it's not just a rendering problem.
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<style>
body {
background: #222730;
margin: 0;
}
div {
position: absolute;
background: #4CAAB3;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#a {
width: 400px;
height: 150px;
}
#b {
z-index: 1;
border: solid 50px #222730;
width: 150px;
height: 150px;
transform: translate(-50%, -50%) rotate(45deg);
}
#c {
z-index: 2;
background: #393E46;
border-radius: 25px;
width: 50px;
height: 50px;
}
</style>
It's coming from the background property of #b (inherited from div).
Simply shift this property setting to be exclusive to #a:
body {
background: #222730;
margin: 0;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#a {
width: 400px;
height: 150px;
background: #4CAAB3;
}
#b {
z-index: 1;
border: solid 50px #222730;
width: 150px;
height: 150px;
transform: translate(-50%, -50%) rotate(45deg);
}
#c {
z-index: 2;
background: #393E46;
border-radius: 25px;
width: 50px;
height: 50px;
}
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
You can simplify your code like below:
html {
background:
linear-gradient(#4CAAB3 0 0)center/100% 150px repeat-x /* the bar below the rotate square */
#222730
}
body {
width: 150px;
height: 150px;
margin: 25px auto;
border: 50px solid #222730; /* the border */
background:
#4CAAB3 padding-box /* the main color */
radial-gradient(1px, #393E46 24px, #0000 25px); /* the circle */
transform: rotate(45deg);
}
I am building a webpage with cards arranged in a grid.
However, I would like my cards to have a unique shape, rather than just being rectangles. The shape I would like them to be is the shape of a manilla folder (pictured below)
Is there any relatively simply way to make a div with this shape?
Here is a start using only html and css:
body {
padding: 50px;
}
div {
position: relative;
z-index: 1;
white-space: nowrap;
}
div .slant {
position: relative;
display: inline-block;
color: inherit;
text-decoration: none;
margin: 0 -14px -4px;
width: 40px;
}
div .slant::before,
main {
border: 0.2em solid #000;
background: #000;
}
div .slant::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0.5em;
left: 0;
z-index: -1;
border-bottom: none;
border-radius: 5px 5px 0 0;
background: #000;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
div.left .slant {
padding: 1.5em 2em 1em 1em;
}
div.left .slant::before {
transform-origin: bottom left;
}
main {
display: block;
margin: -8px 0 30px -14px;
padding: 1em;
border-radius: 0 5px 5px 5px;
width: 200px;
height: 300px;
}
<div class="left">
<div class="slant"></div>
</div>
<main>
</main>
It took me about 10 minutes just to do that, so if you have the motivation to improve it, feel free to do so. It is possible to do it with divs and positioning with CSS. It's just a matter of playing with z-index and shapes, but unless you just wan't to impress yourself for achieving it, the easiest way is to create a background image and move your html content over it.
I am not the best front-end programmer either so don't be arshe! I'm sure someone else could improve it even better with outline borders and stuff.
div#panel {
position: absolute;
border: 3px solid black;
border-radius: 10px;
width: 200px;
height: 200px;
background-color: white;
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%, -50%);
}
div#box {
position: absolute;
border: 3px solid red;
z-index: 0;
border-radius: 10px;
width: 200px;
height: 200px;
top: 48.5%;
left: 50%;
z-index: ;
transform: translate(-50%, -50%);
}
div#box2 {
position: absolute;
border: 3px solid red;
border-radius: 10px;
width: 80px;
height: 200px;
background-color: white;
top: 47%;
left: 46.9%;
z-index: 1;
transform: translate(-50%, -50%);
}
<div id="panel"></div>
<div id="box">
<p style="padding-left: 5px;"> Some text here</p>
</div>
<div id="box2"></div>
You can use this shape as the background-image of the card. Remove the card default property like background-color, box-shadow...
HTML:
<div class="main-class">
<div class="card">
.....
</div>
</div>
CSS:
.main-class .card{
background-image: url("path");
background-repeat: no-repeat;
background-size: cover;
background-color: transparent;
box-shadow: none;
}
Need help on how to put an arrow on each side of a box pointing outward.
I have the box and the basic CSS for an arrow I saw on another stack question.
Need help creating four arrows in that box
Im a java developer so this is not my cup of tea
Box:
#myBox {
width: 150px;
height: 150px;
background-color: grey;
border: 1px solid black;
}
/*Chevron*/
.Chevron {
position: relative;
display: block;
height: 50px;
/*height should be double border*/
}
.Chevron:before,
.Chevron:after {
position: absolute;
display: block;
content: "";
border: 25px solid transparent;
/*adjust size*/
}
/*Change four 'top' values below to rotate (top/right/bottom/left)*/
.Chevron:before {
top: 0;
border-top-color: #b00;
/*Chevron Color*/
}
.Chevron:after {
top: -50px;
/*adjust thickness*/
border-top-color: #fff;
/*Match background colour*/
}
<div id="myBox"></div>
<i class="Chevron"></i>
Since you are looking to interact with these shapes, you'd be better to go with a different approach to making your triangles, rather than a border hack.
.box {
height: 150px;
width: 150px;
background: lightgray;
position: relative;
}
.wrap {
position: absolute;
top: 0;
left: 25%;
height: 25%;
width: 50%;
overflow: hidden;
}
.touch {
position: absolute;
top: 0;
left: 50%;
height: 200%;
width: 200%;
transform: rotate(45deg);
transform-origin: top left;
background: gray;
cursor: pointer;
}
.wrap:nth-child(2) {
transform: rotate(90deg);
transform-origin: top left;
top: 25%;
left: 100%;
}
.wrap:nth-child(3) {
transform: rotate(180deg);
transform-origin: top left;
top: 100%;
left: 75%;
}
.wrap:nth-child(4) {
transform: rotate(-90deg);
transform-origin: top left;
top: 75%;
left: 0;
}
.touch:hover {
background: tomato;
}
<div class="box">
<span class="wrap"><span class="touch"></span></span>
<span class="wrap"><span class="touch"></span></span>
<span class="wrap"><span class="touch"></span></span>
<span class="wrap"><span class="touch"></span></span>
</div>
i have used the nth-child in order to position the arrows correctly. I have also needed to used a wrapper div like in this answer as the border-hack won't work on a hit-test.
Use Css triangle. Do you need something like this?
For each side, use the code below to make a triangle:
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 100px 0;
border-color: transparent #007bff transparent transparent;
Here is a working demo.
I have managed to do this with 3 elements using CSS transforms and positioning. Is that what you were trying to achieve?
.container {
width: 100px;
height: 100px;
background: grey;
position: relative;
}
.container .triangles {
width: 70px;
height: 70px;
background: yellow;
transform: rotate(45deg);
position: absolute;
top: 15px;
left: 15px;
}
.container .triangles .box {
width: 50px;
height: 50px;
background: blue;
transform: rotate(-45deg);
position: absolute;
top: 10px;
left: 10px;
color: white;
}
<div class="container">
<div class="triangles">
<div class="box">
text
</div>
</div>
</div>
So i've got a modal div (set with z-index) that I'm trying to center vertically. The thing is I use it for not only one content but several ones, so the height is not fix. And while having a general "fix" (I'll explain in just after) of -150px in the margin-top generally works for short content, when having a lot of content, the div will start at mid-page and finish at the end (which is not what I want at all). Here is my code :
.modal
{
padding: 10px;
border: 1px black solid;
width: 80%;
position: absolute;
background: white;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -40%;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
}
So here you can see the "fix". It works kind of well when the content is short :
It's pretty ugly when the content is big :
Does anyone have an idea of how to fix that ?
Thank you in advance
You could use this. Top 50% position the div on the 50% of the container y translate -50% is referred to his height and no the container:
.modal {
padding: 10px;
border: 1px black solid;
width: 80%;
position: absolute;
background: white;
left: 50%;
margin-left: -40%;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
top: 50%;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
FIDDLE
Add the following css to center the div. note that this only works on position:absolute elements.
top: 0;
bottom:0;
margin-top: auto;
margin-bottom: auto;
So your css will become:
.modal
{
padding: 10px;
border: 1px black solid;
width: 80%;
position: absolute;
background: white;
left: 50%;
top: 0;
bottom:0;
margin-top: auto;
margin-bottom: auto;
margin-left: -40%;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
}
.modal{
padding: 10px;
border: 1px black solid;
width: 80%;
background: white;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
margin: auto;
}