I have two containers and I want to link them with a negative-rounded-ish div : JSFIddle
HTML:
<div class="div"></div>
<div class="d-flex">
<div class="p1"></div>
<div class="p2"></div>
</div>
<div class="div"></div>
CSS:
.div {
background:#e0e0e0;
border:solid 1px red;
padding:10px;
border-radius:5px
}
.p1 {
background:#e0e0e0;
width: 25px;height: 10px;
-webkit-mask-image: radial-gradient(circle at left, transparent 0, transparent 19px, black 0px);
}
.d-flex { display:flex }
.p2 {
background:#e0e0e0;
width: 25px; height: 10px;
-webkit-mask-image: radial-gradient(circle at right, transparent 0, transparent 19px, black 0px);
}
Preview:
I want to know if I can extend borders to get sth like this
CSS tricks with before & after pseudo might help!
.div {
background:#e0e0e0;
border:solid 1px red;
padding:10px;
border-radius:5px
}
.join {
margin-left: 20px;
background:#e0e0e0;
width: 20px;
height: 10px;
overflow:hidden;
position:relative;
z-index:1;
margin-top:-1px;
margin-bottom: -1px;
}
.join:before, .join:after{
content: '';
height: 8px;
width: 10px;
position:absolute;
border-radius:10px;
border:1px solid red;
background-color:#fff;
}
.join:before{
left:-5px;
border-left: 0;
}
.join:after{
right:-5px;
border-right: 0;
}
<div class="div"></div>
<div class="join"></div>
<div class="div"></div>
Related
I want the code to show up the 3 bars, and the 3 dots to eventually be dropdown options. For some reason the 1st out of the 3 dots does not want to be spaced correctly.
#dropdown {
background: #3f51b5;
padding: 30px;
margin: 0px;
}
#dot {
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
float: right;
}
#bar {
width: 25px;
height: 3px;
background: white;
margin: 5px;
}
<div id="dropdown">
<div id="dot"></div>
<div id="bar"></div>
<div id="dot"></div>
<div id="bar"></div>
<div id="dot"></div>
<div id="bar"></div>
</div>
Picture of what is returned:
This is a hard thing to do with floats.
A possible solution could be to wrap the dots and the bars within a div.
Afterwards you can position those wrapping divs in the style you like.
I used flexbox for this in the following snippet.
#dropdown {
display: flex;
justify-content: space-between;
align-items: center;
background: #3f51b5;
padding: 30px;
margin: 0px;
}
.dot {
width: 5px;
height: 5px;
margin: 5px;
background: white;
border-radius: 50%;
}
.bar {
width: 25px;
height: 3px;
background: white;
margin: 5px;
}
<div id="dropdown">
<div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
p.s.: you should use the keyword class instead of id for repeating elements. This might still work, but is considered bad practice and might break javascript implementations using that id.
You can easily do this with one element for each:
#dropdown {
background: #3f51b5;
padding: 10px 50px;
overflow:hidden;
}
#dot {
width: 10px;
height: 30px;
background:
radial-gradient(5px 5px at center, white 57%, transparent 61%) top/10px 10px;
float: right;
}
#bar {
width: 25px;
height: 22px;
margin: 4px 0;
background:
linear-gradient(#fff,#fff) top/100% 3px,
linear-gradient(#fff,#fff) center/100% 3px,
linear-gradient(#fff,#fff) bottom/100% 3px;
background-repeat:no-repeat;
float:left;
}
<div id="dropdown">
<div id="bar"></div>
<div id="dot"></div>
</div>
Here is another idea:
#dropdown {
background: #3f51b5;
padding: 10px 50px;
overflow:hidden;
}
#dot {
width: 5px;
height: 5px;
background:#fff;
box-shadow:
0 10px 0 #fff,
0 20px 0 #fff;
border-radius:50%;
float: right;
}
#bar {
width: 25px;
height: 23px;
padding:7px 0;
margin: 4px 0;
border-top:3px solid #fff;
border-bottom:3px solid #fff;
background:#fff content-box;
float:left;
box-sizing:border-box;
}
<div id="dropdown">
<div id="bar"></div>
<div id="dot"></div>
</div>
Also like this with pseudo element:
#dropdown {
background: #3f51b5;
padding: 10px 50px;
overflow:hidden;
}
#dot {
width: 5px;
height: 5px;
margin: 15px 0;
background:#fff;
border-radius:50%;
float: right;
position:relative;
}
#dot:before,
#dot:after{
content:"";
position:absolute;
height:inherit;
width:100%;
left:0;
background:inherit;
border-radius:inherit;
top:-8px;
}
#dot:after {
bottom:-8px;
top:auto;
}
#bar {
width: 25px;
height: 3px;
margin: 15px 0;
background:#fff;
float:left;
box-sizing:border-box;
position:relative;
}
#bar:before,
#bar:after{
content:"";
position:absolute;
height:inherit;
width:100%;
left:0;
background:inherit;
top:-8px;
}
#bar:after {
bottom:-8px;
top:auto;
}
<div id="dropdown">
<div id="bar"></div>
<div id="dot"></div>
</div>
Use something like if you want to check for first specific dot
#dropdown div:first-child {
position:relative;
top:4px
}
First, I know there are similar questions available (like. Create concave corners in css) but they don't really cover this situation.
This is not about single cell/div element.
I have three blocks that will have some text content inside:
top-middle centered block (narrow)
middle-middle block (screen-wide)
bottom-middle centered block (narrow)
Basically something like a cross (text removed):
The outer corners (8) is straighforward but how could I achieve those inner ones (4)?
see bellow code, maybe it needs some adjustments but the idea is that you use pseudo-elements to make those inner borders
let me know if this is what you want
.colored {
background:yellow;
border:5px solid green;
width:100px;
height:100px;
box-sizing:border-box;
position:relative;
}
#content {
width:300px;
position:relative;
background:#000;
}
.top,.bottom { position:relative;margin:0 auto;clear:both}
.top { border-bottom:none}
.bottom { border-top:none}
.left { border-right:none}
.right { border-left:none;}
.colored.center { border:none;}
.left,.center,.right { float:left;}
.top { border-top-left-radius:10px;border-top-right-radius:10px;}
.bottom { border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
.right { border-bottom-right-radius:10px;border-top-right-radius:10px;}
.left { border-bottom-left-radius:10px;border-top-left-radius:10px;}
.top:before {
position:absolute;
height:100%;
width:100%;
left:-100%;
top:5px;
content:"";
border-bottom-right-radius:10px;
border-right:5px solid green;
border-bottom:5px solid green;
z-index:9999;
box-sizing:border-box;
}
.top:after {
position:absolute;
height:100%;
width:100%;
right:-100%;
top:5px;
content:"";
border-bottom-left-radius:10px;
border-left:5px solid green;
border-bottom:5px solid green;
z-index:9999;
box-sizing:border-box;
}
.bottom:before {
position:absolute;
height:100%;
width:100%;
left:-100%;
bottom:5px;
content:"";
border-top-right-radius:10px;
border-right:5px solid green;
border-top:5px solid green;
z-index:9999;
box-sizing:border-box;
}
.bottom:after {
position:absolute;
height:100%;
width:100%;
right:-100%;
bottom:5px;
content:"";
border-top-left-radius:10px;
border-left:5px solid green;
border-top:5px solid green;
z-index:9999;
box-sizing:border-box;
}
<div id="content">
<div class="top colored">
</div>
<div class="left colored">
</div>
<div class="center colored">
</div>
<div class="right colored">
</div>
<div class="bottom colored">
</div>
</div>
Variation with just three divs, a bit hacky but functional. Uses pseudo elements, transforms and inner box-shadow.
div {
background-color: #000;
min-height: 100px;
}
.center {
width: 100px;
margin: 0 auto;
}
.rounded {
border-radius: 20px;
border: 5px solid red;
}
.conc {
position: relative;
}
.conc::before,
.conc::after {
content: '';
position: absolute;
border: 5px solid red;
border-radius: 20px;
width: 25px;
height: 25px;
background-color: trnaspanret;
border-color: red transparent transparent;
z-index: 3;
box-shadow: white 0px 0px 0px 20px inset
}
.conc.bottom {
margin-bottom: -5px;
border-bottom: 0;
border-radius: 20px 20px 0 0
}
.conc.top {
margin-top: -5px;
border-top: 0;
border-radius: 0 0 20px 20px
}
.conc::before {
left: -35px;
}
.conc::after {
right: -35px;
}
.conc.top::before,
.conc.top::after {
top: 0px;
}
.conc.bottom::before,
.conc.bottom::after {
bottom: 0px;
}
.conc.bottom::before {
transform: rotate(135deg)
}
.conc.bottom::after {
transform: rotate(-135deg)
}
.conc.top::before {
transform: rotate(45deg)
}
.conc.top::after {
transform: rotate(-45deg)
}
.centerblinders {
position: relative;
}
.centerblinders::before,
.centerblinders::after {
content: '';
position: absolute;
width: 130px;
height: 20px;
background-color: #000;
left: 50%;
transform: translatex(-50%);
z-index: 2;
}
.centerblinders::before {
top: -15px;
}
.centerblinders::after {
bottom: -15px;
}
<div class="rounded center conc bottom"></div>
<div class="rounded centerblinders"></div>
<div class="rounded center conc top"></div>
I suspect using line gradient?I know how to do the ellipse thing but I just don't understand how I can make the red line right through the middle?
I would make something like this: DEMO FIDDLE
CSS:
#container {
position: relative;
width: 200px;
background-color:black;
z-index:-2;
padding: 10px 0;
text-align:center;
}
#line {
position: absolute;
top: 50%;
width: 80%;
left:10%;
height: 1px;
box-shadow: 1px 1px 20px 5px red;
z-index:-1;
background-color: red;
}
#text{
color:white;
font-weight:bold;
text-transform:uppercase;
letter-spacing:8px;
text-shadow: 1px 1px 1px #ccc
}
HTML:
<div id="container">
<div id="text">Text</div>
<div id="line"></div>
</div>
I want to create arc transparent inside border radius with CSS\html. In fact I want corner div to be transparent and display bottom of page.
.corner{
float:right;
border-top-left-radius:60%;
width:50px;
height:48px;
margin-top:2px;
background:#fff;
background:rgba(f,f,f,0.1);
}
.div{
background-color: rgb(50,20,70);
width:130px;
height:50px;
}
.left{
float:left;
width:70px;
height:48px;
margin-top:2px;
color:white;
}
<div class="div">
<div class="left">345345</div>
<div class="corner"></div>
</div>
You can use a box-shadow to keep a transparent background on .corner :
.corner {
float: right;
border-top-left-radius: 60%;
width: 50px;
height: 48px;
margin-top: 2px;
box-shadow:0 0 0 500px rgb(50, 20, 70);
}
.div {
overflow:hidden;
width: 130px;
height: 50px;
}
.left {
float: left;
width: 70px;
height: 48px;
margin-top: 2px;
color: white;
}
body{
background:url('http://lorempixel.com/output/people-q-c-640-480-7.jpg');
background-size:cover;
<div class="div">
<div class="corner"></div>
<div class="left">345345</div>
</div>
I'm trying to make some kind of "triangular ornament" bar with html/css. Can you please tell me how to make such?
Here is the image :
Thanks in advance
I have made this by mixing two triangles and a rectangle see if this is what you want http://jsfiddle.net/xkwbt73v/5/
HTML
<div id="triangle-left"></div>
<div id="triangle-left-down"></div>
<div id="bar"></div>
CSS
#triangle-left {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
#triangle-left-down {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
#bar{
width:1000px;
height:200px;
background-color:red;
position:absolute;
margin-left:100px;
margin-top:-200px;
}
If you want to do it using one element then have a look at Pseudo-elements - CSS | MDN
HTML:
<figure></figure>
DEMO 1 using Background-image
figure{
width:320px;
height:64px;
background:blue;
position:relative;
margin:40px auto;
}
figure:before{
content: '';
position: absolute;
left: -60px;
width: 100px;
height: 100%;
background-image: linear-gradient(32deg, transparent 50%, blue 0%),linear-gradient(147deg, transparent 50%, blue 0%);
}
DEMO 2 using 2 elements
CSS:
figure{
width:320px;
height:64px;
background:blue;
position:relative;
margin:40px auto;
}
figure:before, figure:after{
content:'';
position:absolute;
display:block;
left: -40px;
width:0;
height:0;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
}
figure:before{
top: 0;
border-top: 32px solid blue;
}
figure:after{
bottom: 0;
border-bottom: 32px solid blue;
}
http://jsfiddle.net/5p4yLrz4/ :)
HTML:
<div class="wrapper">
<div class="triangle"></div>
</div>
CSS:
.wrapper{
width:300px;
background-color:orange;
}
.triangle {
width:0;
border-width: 30px;
border-right:0px;
border-color: transparent transparent transparent yellow;
border-style: solid;
}