i have this css code to add one arrow to my dropdown:
div {
&.toggle-assessment-key-dropdown {
margin-top: 10px;
border: 1px solid #cdd1da;
min-width: 180px;
border-radius: 4px;
min-height: auto;
padding: 6px 10px 5px 9px;
background: #ffffff;
position: absolute;
top: 24px;
left: 0;
z-index: 501;
&:after {
content: '';
position: absolute;
bottom: 100%;
left: 27%;
margin-left: 8px;
width: 0;
height: 0;
border-bottom: 6px solid #cdd1da;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-color: transparent transparent #fff transparent;
border-width: 6px;
background: #cdd1da;
}
}
}
This is the result:
I would like to remove grey corner but keep grey border:
Thank you
I have created snippet according to requirement, Currently done with css, you can make scss or i will create a pen let me know. please check:
div.toggle-assessment-key-dropdown {
margin-top: 10px;
border: 1px solid #cdd1da;
min-width: 180px;
border-radius: 4px;
min-height: auto;
padding: 6px 10px 5px 9px;
background: #ffffff;
position: absolute;
top: 24px;
left: 0;
z-index: 501;
}
div:before {
content: '';
position: absolute;
bottom: 100%;
left: 26%;
margin-left: 8px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #cdd1da transparent;
border-width: 7px;
}
div:after {
content: '';
position: absolute;
bottom: 100%;
left: 27%;
margin-left: 8px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #fff transparent;
border-width: 5px;
}
<div class="toggle-assessment-key-dropdown">
Item
</div>
Related
I am trying to create a div that looks like that. See the top and bottom with the little tab. I cannot figure out how to do this, it is a "design" thing. I have tried to use the :before :after CSS to create this but no luck. Any ideas?
Added code below. You can see it comes to a point, any way to have it flat?
.container {
width: 150px;
height: 75px;
background-color: white;
border: 3px solid #000;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.container.tab-top:before {
content: " ";
position: absolute;
right: 0px;
top: -15px;
border-top: none;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
border-bottom: 15px solid black;
}
.container.tab-bottom:after {
content: " ";
position: absolute;
right: 0px;
bottom: -15px;
border-top: 15px solid black;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
border-bottom: none;
}
<div class="container tab-top tab-bottom">
</div>
Don't use borders for this. Create a pseudo element and use border-radius.
.container {
width: 150px;
height: 75px;
background-color: white;
border: 3px solid #000;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.container.tab-top:before {
content: " ";
position: absolute;
width: 60%;
height: 7px;
left: 50%;
transform: translateX(-50%);
background: black;
border-radius:20px 20px 0 0;
top: -7px;
}
.container.tab-bottom:after {
content: " ";
position: absolute;
width: 60%;
height: 7px;
left: 50%;
transform: translateX(-50%);
background: black;
border-radius:0 0 20px 20px;
bottom: -7px;
}
<div class="container tab-top tab-bottom">
</div>
You can approximate it using perspective and rotation:
.container {
width: 200px;
height: 100px;
border: 3px solid #000;
position: relative;
margin: 40px
}
.container.tab-top:before,
.container.tab-bottom:after {
content: " ";
position: absolute;
left:15%;
right:15%;
height:30px;
background:#000;
}
.container.tab-top:before {
bottom:100%;
border-radius:10px 10px 0 0;
transform-origin:bottom;
transform:perspective(100px) rotateX(50deg);
}
.container.tab-bottom:after {
top:100%;
border-radius:0 0 10px 10px;
transform-origin:top;
transform:perspective(100px) rotateX(-50deg);
}
<div class="container tab-top tab-bottom">
</div>
You need to use Trapezoid Shape css like:
#trapezoid {
border-bottom: 100px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
.box {
display: block;
width: 150px;
height: 200px;
border: 2px solid pink;
position: relative;
}
.box::before {
position: absolute;
content: "";
border-bottom: 10px solid pink;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
height: 0;
width: 100px;
top: -10px;
left: 0;
right: 0;
margin: auto;
}
.box::after {
position: absolute;
content: "";
border-top: 10px solid pink;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
height: 0;
width: 100px;
bottom: -10px;
left: 0;
right: 0;
margin: auto;
}
<div class="box"></div>
I used as before after css of a div.
I have an old piece of code that pops up a message on moseover. It is coded with absolute positioning and works fine. But I need to change it to relative positioning so the code works better with mobile devices. In this jsfiddle the top line is using relative and doesn't work. The bottom line is using absolute and is working. Would someone please point out where I am going wrong? Here's my code:
<style>
.tooltips {
position: relative;
display: inline;
}
.spank{
position: absolute;
width:250px;
color: #000;
background: #FFFFFF;
border: 1px solid #ccc;
padding:10px;
text-align: center;
display:none;
border-radius: 7px;
box-shadow: -1px 0px 7px #ccc;
}
.spank:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0; height: 0;
border-top: 10px solid #ccc;
border-right: 10px solid transparent;
border-left: 12px solid transparent;
}
.spank:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #FFFFFF;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.showhim:hover .spank{
display : block;
left:5px;
top:1px;
margin-left: 50px;
z-index: 999
}
.showhim {
left: 50px;
position: relative;
top: 80px;
width: 100px;
}
.spankme{
position: absolute;
width:250px;
color: #000;
background: #FFFFFF;
border: 1px solid #ccc;
padding:10px;
text-align: center;
display:none;
border-radius: 7px;
box-shadow: -1px 0px 7px #ccc;
}
.spankme:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0; height: 0;
border-top: 10px solid #ccc;
border-right: 10px solid transparent;
border-left: 12px solid transparent;
}
.spankme:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #FFFFFF;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.showme:hover .spankme{
display : block;
left: 10px;
top:10px;
margin-left:50px;
z-index: 999
}
.showme {
position: relative;
width: 100px;
}
</style>
<div class="showme">
<div class="showme tooltips">Mouse me</div>
<span class="spankme">Text on popupPlace</span>
</div>
<div class="showhim">
<div class="showit tooltips">Mouse me</div>
<span class="spank">Text on popupPlace</span>
</div>
For the hover that applies to .spankme, you aren't targeting the parent like you did with .spank. The following will allow the parent to reference the child on hover.
Change
.showme:hover .spankme
to
.showhim:hover .spankme
Also, you have three z-index: 999 properties that are missing a closing semi-colon.
I want to create a diamond using css3. I have this code which returned partial results.
.diamond {
width: 100%;
height: 100%;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px; }
.diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 100%;
height: 100%;
bord*emphasized text*er: 50px solid transparent;
border-top-color: red;
}
Check out this link you can access different type of shapes.
https://css-tricks.com/examples/ShapesOfCSS/#cut-diamond
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
<div id="cut-diamond"></div>
You need to change 100% to 0 like below:
.diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px; }
.diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
bord*emphasized text*er: 50px solid transparent;
border-top-color: red;
}
Change css like:
.diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
.diamond:after {
content: '';
position: absolute;
left: -50px;
top: 19px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
<div class="diamond" />
You can find different shape from here
Following is my jsfiddle in which I am trying to place an arrow image on the bottom border centerally aligned but I am unable to do that. Kindly let me know how to put an arrow image so its centrally aligned no matter what the width of the box is or height? Thanks
http://jsfiddle.net/wn7JN/463/
.bubble
{
position: relative;
width: 100px;
height: 50px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.arrow:before
{
content: "";
position: absolute;
left: 50%;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
background-image:url(http://img2.wikia.nocookie.net/__cb20120818025551/merlin1/images/4/46/Drop_down_arrow.gif);
z-index: 0;
}
Try this. I add some changes check,
.bubble
{
position: relative;
width: 600px;
height: 50px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.arrow:before
{
content: "";
position: absolute;
left: 50%;
bottom:-26px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
margin:0 0 0 -26px;
}
replace the .arrow:before style & try it. it will align the arrow at center bottom.
.arrow:before
{
content: "";
position: absolute;
left: 50%;
top:100%;
margin-left:-26px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
background:url(http://img2.wikia.nocookie.net/__cb20120818025551/merlin1/images/4/46/Drop_down_arrow.gif);
z-index: 0;
}
I am trying to make a popover with an error, but I am having trouble making the arrow appear above the border of the div I am attaching it to. I would appreciate any help.
This is what I have so far...
This is the CSS code I am using, but cant get it to work:
1.DIV for the entire popover:
<div class="info-popover">
<div class="inner"></div>
<div class="arrow"></div>
</div>
2.CSS for each:
.info-popover {
height: 250px;
margin-top: -255px;
position: absolute;
width: 400px;
}
.info-popover .inner {
background-color: #FFFFFF;
border: 1px solid #003366;
border-radius: 10px 10px 10px 10px;
height: 240px;
margin-top: 0;
width: 100%;
}
.info-popover .arrow {
background: url("/images/dock/popover-arrow.png") no-repeat scroll center -5px transparent;
height: 15px;
position: relative;
width: 100%;
z-index: 999;
}
CSS solution:
http://jsfiddle.net/wn7JN/
.bubble
{
position: relative;
width: 400px;
height: 250px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after
{
content: "";
position: absolute;
bottom: -25px;
left: 175px;
border-style: solid;
border-width: 25px 25px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
.bubble:before
{
content: "";
position: absolute;
top: 250px;
left: 174px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}
Easiest way:
HTML:
<div class="meow">
</div>
CSS:
.meow {
height: 100px;
width: 300px;
margin: 30px;
background: linear-gradient(#333, #222);
-o-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.meow:after {
content: " ";
border-top: 11px solid #222;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: relative;
top: 111px;
right: -140px;
}
Live preview: CodePen.io
Just do some few edits.
Try this:
HTML
<div class="info-popover">
<div class="inner"></div>
<p class="arrow"></p>
</div>
CSS
.info-popover {
position: relative;
/* any other CSS */
}
.arrow {
background: url("/images/dock/popover-arrow.png") no-repeat 0 0;
height: 15px;
width: 20px; /* width of arrow image? */
display: block;
position: absolute;
bottom: -15px;
left: 0; margin: 0 auto; right: 0; /* to center the arrow */
}