I want to design a button that looks like the one below:
I know it is a localized issue, but I can't seem to make it look like that without images
I have used both a :before and :after pseudo element in order to achieve and effect like this.
You could then use a combination of CSS transform properties. Something like a rotation with perspective should create the trapezium, and then use borders on another pseudo element to generate the lines.
A quick mockup demo would be:
.demowrapper {
margin: 0 auto;
height: 500px;
background: lightgray;
width: 300px;
box-shadow: 0 0 20px 5px dimgray;
position: relative;
}
button {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 30px;
background: tomato;
display: inline-block;
border: 0;
cursor: pointer;
}
button:before {
content: "";
position: absolute;
height: 20px;
width: 50px;
background: inherit;
top: -18px;
left: 50%;
border-radius: 5px 5px 0 0;
transform: translateX(-50%) perspective(50px) rotateX(45deg);
}
button:after {
content: "";
position: absolute;
height: 2px;
width: 40px;
border-top: 2px solid black;
border-bottom: 2px solid black;
top: -8px;
left: 50%;
transform: translate(-50%);
}
button:hover{
background:yellow;
<div class="demowrapper">
<button>SELECT your Button</button>
</div>
Related
Is it possible to make this shape in CSS3?
You can do something like this, using a pseudo selector of after.
CODEPEN LINK
CSS
div {
height: 200px;
background: blue;
position: relative;
width: 400px;
}
div:after {
content: '';
position: absolute;
top: -50px;
left: -200px;
border-top: 300px solid white;
border-left: 300px solid white;
width: 0;
background: #fff;
border-radius: 300px;
}
I want to create a div with an image and text in it that looks like this.
I've managed to get something that looks like this here:
JSFiddle of pointed div
.triangle-down {
background: white;
display: inline-block;
height: 125px;
margin-left: 20px;
margin-bottom: 55px;
position: relative;
width: 200px;
cursor: pointer;
border: red solid 2px;
}
img {
margin: 10px;
}
.triangle-down:before {
border-top: 20px solid red;
border-left: 101px solid transparent;
border-right: 101px solid transparent;
content: "";
height: 0;
left: -1px;
position: absolute;
top: 127px;
width: 0;
}
.triangle-down:after {
border-top: 20px solid white;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: 125px;
width: 0;
}
<div class="triangle-down">
<img src="http://placehold.it/180x105">
</div>
The issues I have are:
(1) The curser turns to a pointer outside the shape when it crosses the transparent borders that help create the point. I'd prefer it if the pointer appeared only when inside the visible outline of the shape.
(2) Is there a better way of doing this? I looked at trying to rotate a div to create the point as I thought this would solve the pointer issue but I can't work out how to create an isosceles triangle shape with the correct proportions this way. This would also allow me to apply a border to create the outline rather than overlay two triangles as I have in the JSFiddle. See this post for more on this - Speech bubble with arrow
Here is a version using transform: rotate
/*Down pointing*/
.triangle-down {
background: white;
display: inline-block;
height: 125px;
margin-left: 20px;
margin-bottom: 55px;
position: relative;
width: 200px;
cursor: pointer;
border: red solid 2px;
}
img {
position: relative;
margin: 10px;
z-index: 1
}
.triangle-down:before,
.triangle-down:after {
border-bottom: 2px solid red;
background: white;
content: '';
height: 50px;
left: 5px;
position: absolute;
top: 98px;
width: 54%;
transform: rotate(22deg);
z-index: 0;
}
.triangle-down:after {
left: auto;
right: 5px;
transform: rotate(-22deg);
}
<div class="triangle-down">
<img src="http://placehold.it/180x105">
</div>
I need to create 1 div element and in it I need to draw 2 triangles as 1
1) it must be up arrow
2) it must be down arror
but I need add them in 1 class
I understand that I can create 2 classes and then with margin connect them but I need only one class
this is a problem.
can I do this?
If you were looking to make This for design (rather than being functional), you could use pseudo elements:
div {
position: relative;
margin: 50px;
height: 100px;
width: 100px;
transform: rotate(45deg);
}
div:before {
content: "";
height: 40%;
width: 40%;
top: 0;
left: 0;
position: absolute;
border-top: 5px solid black;
border-left: 5px solid black;
transition: all 0.6s;
}
div:after {
content: "";
height: 40%;
width: 40%;
bottom: 0;
right: 0;
position: absolute;
border-bottom: 5px solid black;
border-right: 5px solid black;
transition: all 0.6s;
}
div:hover:before,
div:hover:after {
border-color: tomato;
}
<div></div>
If, however, you need this to be actually functional (i.e. to register if you need it to be 'pressable' - then you would need to use multiple elements since pseudo elements aren't distinguishable in the DOM for 'key pressing'):
div {
margin: 50px;
height: 100px;
width: 100px;
position: relative;
}
div .up {
position: absolute;
top: 0;
left: 50%;
height: 50%;
width: 50%;
transform-origin: top left;
transform: rotate(45deg);
border-left: 5px solid tomato;
border-top: 5px solid tomato;
transition: all 0.6s;
}
div .down {
position: absolute;
top: 45%;
left: -5%;
height: 50%;
width: 50%;
transform-origin: bottom right;
transform: rotate(45deg);
border-bottom: 5px solid tomato;
border-right: 5px solid tomato;
transition: all 0.6s;
}
div span:hover {
border-color: black;
}
<div>
<span class="up"></span>
<span class="down"></span>
</div>
You can create a square div and just rotate it 45 degrees using CSS transform. You can view a live demo of it at JSFiddle
<div class="diamond"></div>
<style>
.diamond {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}
</style>
I'm wondering if this shape can be done in css3 with as little html as possible:
So far, I've managed to do this:
.wrapper {
position: relative;
}
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
position: absolute;
top: 100px;
left: 100px;
}
.box:before {
content: "";
border: 1px solid #000;
border-bottom: 1px solid #fff;
width: 50%;
height: 10px;
position: absolute;
top: -12px;
left: -1px;
}
.box:after {
content: "";
border: 1px solid #000;
border-top: 1px solid #fff;
width: 50%;
height: 10px;
position: absolute;
bottom: -12px;
right: -1px;
}
<div class="wrapper">
<div class="box"></div>
</div>
The fiddle is here, but I don't know how to skew it like that so that I have right angled trapezoid on top and bottom.
The shape needs no extra elements
The shape can be created with just the <div>:
The left side is created with the divs left, top and bottom borders.
The right side is made by :before and its top, right and bottom borders
The spans joining the two boxes are created with the :after thanks to skewY
Note the browser support of the transform property. IE 9 requires the -ms- prefix, and Safari and the Android browser require -webkit-.
Working Example - just the shape
The CSS has been condensed and the border style of the pseudo elements is inherited from the div itself.
div {
border: solid 4px #000;
border-right-width: 0;
width: 100px;
height: 200px;
position: relative;
}
div:before,div:after {
content: '';
display: block;
height: 100%;
width: 100%;
border: inherit;
border-right-width: 4px;
border-left: none;
position: absolute;
left: 100%;
top: 13px;
margin-left: 20px;
}
div:after {
width: 20px;
border-right: none;
top: 5px;
transform: skewY(40deg);
margin: 0;
}
<div></div>
Working example - with text
With the example above, the contents will not be contained inside the entire shape. Rather, it will be constrained inside the divs half width. The contents needs to be wrapped in a <span> with 200% width to punch it outside of the divs constraints.
div {
border: solid 4px #000;
border-right-width: 0;
width: 100px;
height: 200px;
position: relative;
}
div:before,div:after {
content: '';
display: block;
height: 100%;
width: 100%;
border: inherit;
border-right-width: 4px;
border-left: none;
position: absolute;
left: 100%;
top: 13px;
margin-left: 20px;
}
div:after {
width: 20px;
border-right: none;
top: 5px;
transform: skewY(40deg);
margin: 0;
}
span {
width: 200%;
display: block;
padding: 20px 10px 10px;
}
<div><span>This is me writing a large amount of words into the div. I think that you may want a span in order to contain them.</span></div>
Using two different elements:
1) Separate the shape in two different rectangular
2)After use pseudo-elements after and before to create the connection line.
My approach:
.wrapper {
position: relative;
}
.box {
width: 50px;
height: 100px;
border: 4px solid #000;
position: absolute;
top: 100px;
left: 100px;
border-right: 0;
}
.box2 {
width: 50px;
height: 100px;
border: 4px solid #000;
position: absolute;
top: 112px;
left: 164px;
border-left: 0;
}
.box:after {
content: "";
position: absolute;
width: 15px;
border: 2px solid #000;
right: -15px;
top: 2px;
transform: rotate(45deg);
}
.box:before {
content: "";
position: absolute;
width: 15px;
border: 2px solid #000;
right: -15px;
bottom: -10px;
transform: rotate(45deg);
}
<div class="box"></div>
<div class="box2"></div>
I've used four divs: .left, .right, .middle-top and .middle-bottom; and skewed .middle-top and .middle-bottom to add those connection lines.
.left {
width: 40px;
height: 100px;
border: 3px solid black;
border-right: 1px solid white;
position: absolute;
top: 50px;
left: 100px;
}
.right {
width: 40px;
height: 100px;
border: 3px solid #000;
border-left: 1px solid white;
position: absolute;
top: 60px;
left: 160px;
}
.middle-top {
width: 20px;
height: 20px;
border-top: 3px solid black;
position: absolute;
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
top: 55px;
left: 137px;
z-index: 9;
}
.middle-bottom {
width: 21px;
height: 20px;
border-top: 3px solid black;
position: absolute;
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
top: 158px;
left: 135px;
z-index: 9;
}
<div class="left"></div>
<div class="middle-top"></div>
<div class="middle-bottom"></div>
<div class="right"></div>
I'm making a tooltip using CSS. Now using the following html code
<div title="This is some information for our tooltip." class="progress3">
</div>
and the following CSS
.progress3{
display: inline;
position: relative;
}
.progress3:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
content: attr(title);
}
.progress3:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
Now it works, when I hover over it shows the tooltip, but it also shows the title...
How do I remove what's circled in orange in the image below.
Simply don't add the content via the title attribute, change it to something like data-tooltip.
.progress3:hover:after {
content: attr(data-tooltip);
}
jsFiddle example
You could use JS/jQuery, but given the approach you are taking, it is impossible to hide/remove it while keeping functionality as you would then have nothing to add via CSS..
HTML
<div data-tooltip="This is some information for our tooltip." class="progress3">
</div>
CSS
.progress3 {
position: relative;
width: 100px;
height: 100px;
background: red;
}
.progress3:hover:after {
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(data-tooltip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.progress3:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}