I need to use inset Box-Shadow to simulate border, because I need to control how horizontal/vertical borders overlap if they have different colors.
Here I have a Top border only. However, Scale() and certain offsets causes a right/left borders to appear.
This happens on Chrome, but not IE or Edge.
Screenshot
I understand this is related to sub-pixels. Is there a mitigation?
Again, CSS border is not an option for me.
.element {
position: absolute;
left: 22px;
top: 20px;
width: 100px;
height: 100px;
background: yellow;
box-shadow: inset 0 1px 0 0 red;
padding: 5px;
box-sizing: border-box;
}
.container {
background: white;
transform: scale(1.2);
width: 200px;
height: 200px;
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="element">ABCD</div>
</div>
</body>
</html>
Thanks!
If you can't use a border on your .element, then why not create a pseudo-element to apply the border to? A transform: scale() would not change anything about how it looks.
*,
*::before {
box-sizing: border-box;
}
.container {
background: white;
transform: scale(1.2);
width: 200px;
height: 200px;
}
.element {
position: absolute;
left: 22px;
top: 20px;
width: 100px;
height: 100px;
background: yellow;
padding: 5px;
}
.element::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid red;
}
<div class="container">
<div class="element">ABCD</div>
</div>
Related
What I want to do is to cover circle element with square. But I can still see circle border.
When I inspect the element, the child element size doesn't include the parent's border (118px x 118px) so I tried to remove box-sizing: border-box;. Even though child element size is 120px x 120px, the same thing still happens.
How can I cover the circle properly?
.circle {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 1px solid red;
box-sizing: border-box;
background-color: white;
}
.square {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
}
/* added by editor for betetr visualization purpose */
body {
background: gray;
}
<div class="circle">
<div class="square"></div>
</div>
The content itself starts within the border, not at the end of the border. As such you have to position the element out of the content area. Instead of using top, right, bottom, left you could simply use inset:
.circle {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 1px solid red;
box-sizing: border-box;
background-color: white;
}
.square {
position: absolute;
inset: -1px;
background-color: white;
}
/* added by editor for betetr visualization purpose */
body {
background: gray;
}
<div class="circle">
<div class="square"></div>
</div>
You can cover the circle properly by adding a border also to the square. and moving it a bit.
.circle {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 1px solid red;
box-sizing: border-box;
background-color: white;
}
.square {
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.5);
border: 1px solid white;
}
/* added by editor for betetr visualization purpose */
body {
background: gray;
}
<div class="circle">
<div class="square"></div>
</div>
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;
}
I need to get the same rectangle box as in the image. I tried this w3c code and played around. Still unable to get it the way I want. Please help with some suggestions.enter image description here
#div1 {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
border: 1px solid black;
-webkit-perspective: 150px;
/* Chrome, Safari, Opera */
-webkit-perspective-origin: 10% 10%;
/* Chrome, Safari, Opera */
perspective: 150px;
perspective-origin: 15% 10%;
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: blue;
-webkit-transform: rotateX(45deg);
/* Chrome, Safari, Opera */
transform: rotateX(25deg);
}
<div id="div1">
<div id="div2">sample</div>
</div>
Is this what you're looking for?
body {
background: #F4F7FA;
}
.center {
position: absolute;
top: 50%;
left: 50%;
margin: -100px;
}
.parent {
width: 200px;
height: 200px;
position: absolue;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.child {
width: 100%;
height: 100%;
background: white;
border-radius: 10px;
box-shadow: 0px 3px 15px rgba(0,0,0,0.15);
-webkit-transform: rotateX(1deg) rotateY(9deg);
transform: rotateX(1deg) rotateY(22deg);
}
<div class="center">
<div class="parent">
<div class="child"></div>
</div>
<div>
The CSS style:
.outer {
position: relative;
width: 100%;
height: 200px;
background-color: #000;
overflow: hidden;
}
.outer:focus {
outline: 10px solid #00FF00;
}
.inner {
position: absolute;
width: 50%;
height: 200px;
background-color: #F0F;
left: 50%;
}
.inner:focus {
outline: 10px solid #FFFF00;
}
The HTML code:
<div tabindex="0" class="outer">
<div tabindex="0" class="inner">
The problem:
I want to make inner div focusable with an outline border, but because of overflow: hidden; I can't do it. This is only an example. Also, I don't wanna touch the overflow: hidden of the outer div when the focus is on the inner one, so this won't go. Perhaps there's an easy way(code only, no imgs-graphics) to implement some sort of border on the focusable element?
*CSS-HTML code only pls. No JS
Use a negative offset for the outline when the div is focused, like so:
.inner:focus {
outline-offset: -10px;
}
The value should be equal to the outline-width.
As an alternative approach you might also use an inset box-shadow e.g.
box-shadow: inset 0 0 0 10px #ff0;
you can use ::after property
.inner:focus::after {
content: "";
height: 90%;
outline: 10px solid #ffff00;
position: absolute;
top: 10px;
width: 98.1%;
z-index: 99999;
}
You could use border instead of outline and set box-sizing: border-box
.outer {
position: relative;
width: 100%;
height: 200px;
background-color: #000;
overflow: hidden;
}
.outer:focus {
outline: 10px solid #00FF00;
}
.inner {
position: absolute;
width: 50%;
height: 200px;
box-sizing: border-box;
background-color: #F0F;
left: 50%;
}
.inner:focus {
border: 10px solid #FFFF00;
}
<div tabindex="0" class="outer">
<div tabindex="0" class="inner">
You can use either box-shadow: inset or outline with negative outline-offset
.inner:focus::after {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* #1 */
box-shadow: inset 0 0 0 4px blue;
/* #2 */
outline: 4px;
outline-offset: -4px;
}
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>