I am trying to draw a 3D-Box with HTML/CSS and for some reason, the lines I add have some weird shadowing/3D-effect themselves:
My only attempt to solve the issue was to google it because my HTML skills are very limited but could not find anything of help.
This is my code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: white;
}
header {
background: white;
padding: 0px;
}
.outerDiv {
margin-top: 0px;
margin-left: 7vw;
position: relative;
height: 90vh;
width: 90vw;
border: 1.1px solid red;
}
.box {
position: absolute;
border: 1px solid black;
font-family: "IBM Plex Sans";
}
.backbox {
top: -20px;
left: -20px;
width: 100%;
height: 100%;
z-index: -1;
}
.frontbox {
top: 7vh;
left: 7vw;
padding: 20px;
background-color: white;
}
.diagonal {
width: 28.3px;
height: 1px;
position: absolute;
transform: rotate(45deg);
transform-origin: 20% 40%;
}
.diagonal_left {
top: -16px;
left: calc(100% - 22px);
}
.diagonal_right {
top: 83%;
left: -21%;
}
<div class="header"></div>
<div class="outerDiv">
<div class="box frontbox">
<hr class="diagonal diagonal_left">
<hr class="diagonal diagonal_right">
<p>hi</p>
<div class="box backbox">
</div>
</div>
</div>
Thanks in advance!
This is happening because for hr elements, the border-style is set to inset by default. Just add this to your css, to get the expected result:
hr {
border: none;
border-top: 1px solid black;
}
This will set the border style to solid (which is the default for div elements), and show the border only for one edge.
Related
I am little stuck and need ur help, actually I am stuck in a problem I need to create an self pointing arrow to a rectangular box in css which I am unable to develop it Any help with example would be appreciated.
To understand the problem better I am attaching the desired output image.
I am also sharing my code what I have tried
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
You can give the second box a pseudo element and style it using clip-path to make a little arrow:
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left-width: 0;
position: relative;
}
.container-2::after {
content: '';
display: block;
position: absolute;
background-color: black;
width: 10px;
height: 10px;
clip-path: polygon(100% 0, 80% 50%, 100% 100%, 0 50%);
bottom: 0;
left: 0;
transform: translateY(50%);
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
Perhaps this pseudo element ::after with a unicode arrow?
I additionally removed the left border
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left:0;
}
.container-2::after {
content: "⮜";
position: absolute;
top: 140px;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
Removed left border
Added pseudo element::before, could also be div with class arrow
Created triangle arrow
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left: none;
position: relative;
}
.container-2:before {
content: '';
display: block;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-right: 8px solid black;
border-bottom: 4px solid transparent;
position: absolute;
left: 0;
bottom: -4px;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
I would like to design a border like below picture. But I am running out of ideas about how to do it.
https://codepen.io/szn0007/pen/VRGPyE
div.about-me h2{
color: #000;
border-bottom: 1px solid #efefef;
width: 20%;
margin: 0 auto;
padding: 20px;
}
THank you in advance.
Luckily with CSS you have access to two pseudo elements on every container. I added the Asterix to one of the pseudo elements :after and the line to another :before.
For example:
.fancy-underline {
position: relative;
display: inline-block;
}
.fancy-underline:before {
content: '';
position: absolute;
top: calc(100% + 10px);
left: 0;
width: 100%;
height: 1px;
background: grey;
}
.fancy-underline:after {
content: '*';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: #fff;
}
<h2 class="fancy-underline">About Me</h2>
try this out:
<div class="about-me">
<h2>About Me</h2>
<p>*</p>
</div>
css:
div.about-me{
width: 100%;
text-align: center;
}
div.about-me h2{
color: #000;
border-bottom: 1px solid #efefef;
width: 20%;
margin: 0 auto;
padding: 20px;
}
p {
font-size: 50px;
transform: translatey(-72px);
}
How would I go about making this in CSS3/HTML5?
The Red background is the background of the div. The inner white is another div that will contain some text.
Since you already have 2 containers, you can use two pairs of pseudo elements for the corners, like this:
.outer {
width: 120px;
background: #a08;
position: relative;
padding: 30px;
}
.inner {
height: 118px;
background: #fff;
border: 1px dashed #a08;
flex: 1;
}
.outer::before, .outer::after, .inner::before, .inner::after {
content: '';
width: 20px;
height: 20px;
background: #a08;
background-clip: padding-box;
border: 1px dashed #a08;
border-radius: 50%;
position: absolute;
z-index: 1;
}
.outer::before {
top: 20px;
left: 20px;
}
.outer::after {
top: 20px;
right: 20px;
}
.inner::before {
bottom: 20px;
left: 20px;
}
.inner::after {
bottom: 20px;
right: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>
I'm working on a 'arrow'-div. It currently looks like this:
the div contains two other divs(two lines). And I want that the background is nearly wrapped around the lines. But the height of the yellow-background is a lot smaller than the height of the lines. I already tried 'height: auto'. I hope someone could help me out.
#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:
The width is also not the way I want it. It's currently 100%-width of the screen.
Try this:
<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;
}
You can do this with one element and :after pseudo-element. Just create 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 other button just rotate 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>
Why don't you try drawing a triangle shape with css since it gives the same result 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>
Try this
#lineAll {
background-color: yellow;
height: auto;
padding: 10px 0;
}
live demo - https://jsfiddle.net/grinmax_/j4aza1om/
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>
Below is the image I am trying for; I managed to get a rectangle using CSS, but I am trying for a rectangle above another one .
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
}
<div ondragstart="dragStart(event)" draggable="true" id="dragtarget2">
<p>meter</p>
</div>
Make your rectangles position: absolute and the container as position: relative.
This is the code you're looking for.
.container{
position: relative;
}
.first , .second, .third {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 40px;
background-color: gray;
border-radius: 4px;
border: 2px solid red;
}
.second{
top: 4px;
left: 4px;
}
.third{
top: 8px;
left: 8px;
}
<div class="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
Use position: absolute/position: relative to move element from it's origin position. Use z-index to move element above/below other elements (higher z-index - higher element is positioned).
.border {
border: 2px solid red;
background-color: #aaa;
width: 200px;
height: 50px;
line-height: 50px;
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
.border:nth-child(2) {
left: 5px;
top: 5px;
z-index: 6;
}
.border:nth-child(3) {
left: 10px;
top: 10px;
z-index: 7;
}
.wrapper {
margin: 10px;
/* NOTE: this does not effect absolute elements */
padding: 10px;
/* NOTE: this will be origin of absolute elements coordinates */
position: relative;
}
<div class="wrapper">
<div class="border">1</div>
<div class="border">2</div>
<div class="border origin">SmartMeter</div>
</div>
With less HTML:
.wrapper {
position: relative;
margin: 10px;
}
.border {
position: relative;
}
.border span,
.border:before,
.border:after {
content: '';
position: absolute;
left: 0;
top: 0;
border: 2px solid red;
background: #aaa;
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
}
.border:after {
left: 5px;
top: 5px;
z-index: 6;
}
.border span {
left: 10px;
top: 10px;
z-index: 7;
}
<div class="wrapper">
<div class="border"><span>SmartMeter</span>
</div>
</div>
I have added two outer divs so that the code is as follows.
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
border: 2px solid;
padding: 2px;
}
.dragtarget0 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 2px;
margin: 2px;
}
.dragtarget1 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 3px;
}
<div class="dragtarget0">
<div class="dragtarget1">
<div id="dragtarget2">
<p>meter</p>
</div>
</div>
</div>