Is it possible to make a div same as this shape, if yes could you please share the code
I would use SVG: http://codepen.io/anon/pen/JdMVXY
<svg>
<path d="M260 150, 0 150, 0 0, 300 0 Q260 75, 260 150"
stroke="transparent" fill="#bd9" />
</svg>
When you have defined the correct aspect ratio of the box, you can also scale the SVG element with a simple CSS transformation (as shown in the example)
Result
This is possible within CSS using a single element with pseudo-elements with border-radius and background-shadow to create the curve.
div {
height: 100px;
width: 300px;
position: relative;
overflow: hidden;
}
div:before {
content: '';
position: absolute;
top: -150%;
left: 50%;
width: 200%;
padding-bottom: 200%;
border-radius: 100%;
background: none;
-webkit-box-shadow: 0px -10px 5px 300px #F15723;
box-shadow: 0px -10px 5px 300px #F15723;
z-index: -1;
}
<div></div>
Try this to make 'div' element:
<div id="test">
<div class="oposite-radius"></div>
<style>
#test {
position: relative;
margin: 30px;
width: 200px;
height: 100px;
border: 1px solid #333;
}
.oposite-radius {
position: absolute;
height: 100px;
width: 20px;
border: 1px solid #333;
background-color: #fff;
left: 180px;
border-radius: 100% 0 0 0;
border-width: 1px 0 0 1px;
}
</style>
Related
I'm trying to create the following using html and css
It's rectangle with with border that has specific length, starting from top center,
the length around the rectangle should specify with percentage,
so the left rectangle should have border with length of 30%, the right should have 45% more or less.
I tried many things like gradient without success
.box {
height: 150px;
width: 150px;
background-color: red;
border-radius: 8px;
position: relative;
overflow: hidden;
}
.box-top {
display: block;
position: absolute;
background-color: blue;
height: 8px;
border-radius: 200px;
top: 0;
right:0;
left: 40%;
bottom: 0;
}
.box-right {
display: block;
position: absolute;
background-color: blue;
width: 8px;
height: 100%;
border-radius: 200px;
top: 0;
right:0;
bottom: 0;
}
.box-bottom {
display: block;
position: absolute;
background-color: blue;
height: 8px;
border-radius: 200px;
right:0;
left: 60%;
bottom: 0;
}
<div class="box">
<div class="box-top"></div>
<div class="box-right"></div>
<div class="box-bottom"></div>
</div>
You can style as much as you like this is just to give to a rough idea how you might approach this. And there can be more than 1 ways to do it.
Like I can see your outline is not inside the box but a few pixels out of it, and you can do that by tweaking the position values.
You can achieve that effect using some before or after pseudo elements.
I've given a simple way to do that below.
.box {
height: 150px;
width: 150px;
background-color: red;
border-radius: 8px;
position: relative;
overflow: hidden;
}
.box::before, .box::after {
content: '';
display: block;
position: absolute;
background-color: transparent;
pointer-events: none;
}
.box::before {
top: 0;
right:0;
left: 40%;
bottom: 0;
border-top: 8px solid blue;
border-right: 8px solid blue;
}
.box::after {
top: 0;
right:0;
left: 60%;
bottom: 0;
border-bottom: 8px solid blue;
}
<div class="box"></div>
<svg viewBox="0 0 500 500">
<style>
#curve {
fill:#0004;
box-shadow:0 0 0 8px #0004;
}
.border{
letter-spacing:-5px;
fill:crimson;
}
</style>
<path id="curve" fill="transparent" d="m100 50,h50,a25 25 0 0 1 25 25,v100,a25 25 0 0 1 -25 25,h-100,a25 25 0 0 1 -25 -25,v-100,a25 25 0 0 1 25 -25" />
<text width="500">
<textPath xlink:href="#curve" class="border">
••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
</textPath>
</text>
</svg>
This isn't possible with only html and css. If you'd make the border with box-shadow: inset 0 0 0 5px, you could use another element on top of it with a conic-gradient with hard color stops to hide the unwanted parts of the box-shadow. The percentage for the color-stops determines how much is shown.
The rounded corners on the line aren't possible like this.
I am trying to create a box-shadow with two different colours horizontally of a line. Is there any way to do it instead of box-shadow? I am trying to build the inner design of the screen.
.neon-rod
{
position: relative;
height: 0.2vmin;
width: 25vmin;
background: red;
left: 50vmin;
box-shadow:
0.2vmin 0 0 0.1vmin #69e;
}
<div class="neon-rod"></div>
Reference Image
Above is the reference image of the design.
Codepen:- https://codepen.io/himanshu-pal/pen/vYejNZW
I have increased the blur and spread of box-shadow property
.neon-rod
{
position: relative;
height: 5px;
width: 100px;
background: red;
left: 50vmin;
box-shadow:
0 0 8px 4px #69e;
}
<div class="neon-rod"></div>
With :before
.neon-rod {
position: relative;
height: 5px;
width: 100px;
background: #69e;
left: 50vmin;
box-shadow: 0 0 8px 4px #69e;
}
.neon-rod:before {
content: "";
position: absolute;
width: 90%;
background: #0f0;
left: 5px;
right: 5px;
top: 3px;
bottom:3px;
box-shadow: 0 0 3px 2px #0f0;
}
<div class="neon-rod"></div>
More details:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
You can add more than one box-shadow and use different colors for each. Just separate the shadows with a comma.
.neon-rod
{
position: relative;
height: 1vmin;
width: 25vmin;
background: red;
left: 50vmin;
top: 10vmin;
box-shadow:
0.2vmin 0.3vmin 1.6vmin #69e8,
0.3vmin 0.4vmin 3.2vmin #69ea,
0.3vmin 0.4vmin 4.8vmin #69ec,
0.3vmin 0.4vmin 6.4vmin #69ef,
-0.2vmin -0.3vmin 0.8vmin green;
}
<div class="neon-rod"></div>
I have two divs on top of each other (adjoined) and they booth as one unit shall have one box-shadow. Now the upper div gives shadow on the lower div which I don't want. I have tried to manipulate it with a "z-index:2" to be more on top but no luck.
I would like to hide the bottom shadow of the upper div and hide the top shadow of the lower div
Also I don't want the shadow to fold into the adjoined sides. The two divs should be one unit having one shadow
In my example here I have simpified the html
<div class="upper-box" style="width:100px;height:100px;">
</div>
<div class="lower-div" style="width:100px;height:100px;">
</div>
In the jsfiddle the css is all in original and here goes all the work of change.
.upper-box {
border-top: 0 none;
margin-bottom: 2px;
margin-top: -2px;
overflow: auto;
position: relative;
padding-top: 0;
/* Expanded panel gets emphasized by a shadow */
box-shadow: 0px 6px 50px 7px rgba(255,255,255,0.75),
0px 6px 50px 7px rgba(88,88,88,0.75),
0px 6px 50px 7px rgba(88,88,88,0.75),
0px 6px 50px 7px rgba(88,88,88,0.75)
;
z-index: 3;
border-style: solid;
border-color: #000000;
border-width: 0px;
position: relative;
}
.lower-div {
border-bottom: 0px;
box-shadow: 0px 6px 50px 7px rgba(88,88,88,0.75);
z-index: 2;
border-style: solid;
border-color: #000000;
border-width: 0px;
}
I would like to hide the bottom shadow of the upper div and hide the top shadow of the lower div
Also I don't want the shadow to fold into the adjoined sides. The two divs should be one unit having one shadow
Here is my live demo
https://jsfiddle.net/y289sdeb/
You could use a pseudo element, like this
.upper-box {
position: relative;
width: 100px;
height: 100px;
background: white;
}
.lower-div {
position: relative;
width: 100px;
height: 100px;
background: white;
}
.upper-box::after,
.lower-div::after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
box-shadow: 0px 6px 50px 7px rgba(88, 88, 88, 0.75);
z-index: -1;
}
<div class="upper-box">
</div>
<div class="lower-div">
</div>
Based on a comment, a wrapper can be used
.wrapper {
position: relative;
display: inline-block;
}
.upper-box {
position: relative;
width: 100px;
height: 100px;
}
.lower-div {
position: relative;
width: 100px;
height: 100px;
}
.wrapper::after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
box-shadow: 0px 6px 50px 7px rgba(88, 88, 88, 0.75);
z-index: -1;
}
<div class="wrapper">
<div class="upper-box">
</div>
<div class="lower-div">
</div>
</div>
I'm trying to add a box shadow on two elements, each with variable width. My desired result looks like this:
I've been trying to get to this result with a pseudo element covering the overlapping box shadows, but because they need to have transparency, I can't seem to find a solution in which there are neither small overlaps at the edges of the boxes nor the pseudo element adjusts to the correct width.
The top box does also not necessarily need a top border to solve my problem.
Fiddle
HTML:
<div>
<p></p>
</div>
<div>
<p></p>
</div>
SCSS:
div {
display: inline-block;
margin: 75px;
width: 200px;
height: 50px;
position: relative;
p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
}
&, p {
background: #ededed;
}
}
div:last-child p {
width: 150px
}
div {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
p {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
}
Edit:
Normally I wouldn't consider JS for layout but since in my particular case the boxes won't be visible until a user interaction occurs, I've used a script to solve my problem.
The script figures out if the top element is bigger than the bottom one when the dom is ready and adds a "big" or "small" class to it respectively. By knowing that, we know which element the pseudo-element's width should inherit. As long as the elements don't get resized in a way that would change which element is bigger, this works fine.
There is also a much cleaner solution without the need for JS and one pseudo element less in case one only needs box-sizing blur and no spread.
Fiddles:
Blur and spread combined (JS),
Only blur, no spread (No JS)
The end result is not quite perfect as you can see in this screenshot where all the white background is replaced with black:
When you look at the left box's top left, you can see that the border shadow has a slight curve.
Anyway, it's close enough to me.
If someone finds a solution with a similar result as in the first fiddle using only css, I would really appreciate it.
You have an easy solution for this, but it is an experimental feature and it has limited support.
Using a filter: drop shadow on the base element, the drop shadow applies to the composite result of this element, and all the descendants
div {
display: inline-block;
margin: 75px;
width: 150px;
height: 50px;
position: relative;
-webkit-filter: drop-shadow(0px 0px 5px rgba(255, 0,0,0.7));
filter: drop-shadow(0px 0px 2px red);
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
margin: 0px;
}
div, div p {
background: #ededed;
}
#second p {
width: 100px;
}
<div>
<p></p>
</div>
<div id="second">
<p></p>
</div>
An alternate approach, that will run in any browser, using pseudo elements for the shadows:
div {
display: inline-block;
margin: 75px;
width: 150px;
height: 50px;
position: relative;
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
margin: 0px;
}
div, div p {
background: #ededed;
}
#second p {
width: 100px;
}
div:after, p:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
box-shadow: 0px 0px 2px 6px rgba(0,255,0,0.7);
z-index: -10;
}
<div>
<p></p>
</div>
<div id="second">
<p></p>
</div>
An alternate approach is to clip the shadows. That is poorly suported, and needs lots of manual adjustements, but the end result is probably the best looking.
Demo working only in webkit
div {
display: inline-block;
margin: 75px;
width: 300px;
height: 50px;
position: absolute;
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 100px;
width: 200px;
margin: 0px;
}
div, div p {
background: #ededed;
}
div:after, p:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
box-shadow: 0px 0px 15px 15px rgba(255,0,0,0.2);
z-index: -10;
}
p:after {
-webkit-clip-path: polygon(0% 30px, 230px 30px, 260px 60px, 100% 100%, 0% 100%);
}
div:after {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 260px 100%, 230px 80px, 0% 80px);
}
<div>
<p></p>
</div>
If you really need a plain color background instead of a background image, this shall work:
I used a div to create the empty area.
<div class="shad">
<div class="cover1"></div>
<p></p>
</div>
<div class="shad">
<div class="cover2"></div>
<p></p>
</div>
The paragraphs are set to same size as div.shad.
div.shad {
display: inline-block;
margin: 75px;
width: 250px;
height: 350px;
position: relative;
background: #ededed;
p {
position: absolute;
top: 0%;
left: 0;
width: 250px;
height: 350px;
}
.cover1 {
position: relative;
float: right;
margin-top: -2px;
margin-right: -2px;
width: 50px;
height: 50px;
background-color: white;
border-left: 2px solid rgba(0, 0, 0, 0.2);
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
.cover2 {
position: relative;
float: right;
margin-top: 50px;
margin-right: -2px;
width: 50px;
height: 300px;
background-color: white;
border-top: 2px solid rgba(0, 0, 0, 0.2);
border-left: 2px solid rgba(0, 0, 0, 0.2);
}
}
div.shad {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
I am trying to create a css design like the image attached below. Actually I need to create this style only using CSS without using any images.
I tried get it to work but not sure How to create inner triangle.
This is my HTML -
body {
background: #cdc6e1;
}
.content-box {
background: #28166f;
width: 250px;
height: 100px;
}
.tag {
background: #f8c300;
width: 100px;
height: 0;
padding-left: 10%;
padding-bottom: 10%;
overflow: hidden;
}
.tag:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #f8c300;
}
<div class="content-box">
<div class="tag">
<h1>1<span>st</span></h1>
</div>
<div class="name">
<h1>First<br>
Place</h1>
</div>
</div>
Hope somebody may help me out to achieve to this custom style.
Thank you.
A basic mockup would be to use some pseudo elements in order to generate this:
.outer {
height: 200px;
width: 400px;
background: purple;
border: 10px solid pink;
position: relative;
text-Align: right;
font-size: 50px;
line-height: 200px;
}
.outer:before,
.outer:after {
height: 0;
width: 0;
position: absolute;
content: "";
border-bottom: 100px solid yellow;
border-right: 70px solid transparent;
border-left: 70px solid transparent;
bottom: 0;
left: 20px;
z-index: 8;
}
.outer:after {
border-bottom: 130px solid blue;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
z-index: 0;
}
.place {
position: absolute;
left: 50px;
color: red;
bottom: -20px;
font-size: 100px;
line-height: initial;
z-index: 10;
text-shadow:
3px 3px 0 white,
/* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}
<div class="outer">First Place
<div class="place">1st</div>
</div>
Note. The text outline property is yet to be implemented in any of the major browsers yet, so it may require a 'larger white text' to be positioned behind to create this text outline in your mockup.
A workaround (as stateed in the comments) would be to 'hack' the text shadow:
text-shadow:
3px 3px 0 white, /* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
Text Stroke
Although only available in webkit broswers, you may possibly want to use text-stroke for your 'white border' to the text (unavailable in IE or Firefox)
div {
font-size: 50px;
position: relative;
height: 50px;
width: 50px;
color: black;
}
div:before {
content: "1st";
z-index: -1;
left: 0;
top: 0;
position: absolute;
-webkit-text-fill-color: black;
-webkit-text-stroke: 8px red;
}
html {
background: gray;
}
<div>
1st
</div>
<br/>
<strong>Note</strong> only available in webkit browsers
Create a duplicate triangle and place it behind. Code given below. JSBin: http://jsbin.com/totewinizu/2/
HTML:
.tag {
width: 100px;
display: block;
position: relative;
top: 20px;
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0px 60px 80px 60px;
height: 0px;
width: 0px;
z-index: 99;
}
.dupe {
position: absolute;
border-color: transparent transparent white transparent;
border-style: solid;
border-width: 0px 60px 80px 60px;
top: 40px;
left: 20px;
z-index: 9;
}
<div class="content-box">
<div class="tag">
<h1>1</h1><span>st</span>
</div>
<div class='tag dupe'>
</div>
<div class="name">
<h1>First<br>
Place</h1>
</div>
</div>