I'm trying to create a triangle clickable button like div, in the attached image is what I want to actually achieve. image
This is what I've reached so far,JsFiddle
HTML:
<div class="input"><</div>
CSS:
body {padding:40px;}
.input {
text-decoration:none;
padding:5px 10px;
background:#117ebb;
font-size:9px;
color:#fff;
border-radius:5.5px 0px 0px 5px;
box-shadow: 0px 5px 3px #003355;
position:relative;
width:1px;
height:12px;
}
.input:after {
position:absolute;
top:0px;
left:-10px;
content:" ";
width: 0;
height: 0px;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right:13px solid #117ebb;
border-radius:0px 0px 0px 20px;
}
css pure triangle and with jquery you could add click events:
html
<div class="input"></div>
jquery
$(document).ready(function(){
$(".input").click(function(){
alert('hello arrow');
});
});
css
body {padding:40px;}
.input{
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
cursor: pointer;
}
http://jsfiddle.net/TvJ6t/
Related
I have created a div that looks like an arrow with css border.
.blue-arrow-right {
width: 0;
height: 0;
position: relative;
float: left;
margin-left: 0px;
margin-top: 5px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #009de1;
}
Now i want to create an extra border on the right side of that div, lets say: 1px solid black
How can i do that?
hers is the fiddle: https://jsfiddle.net/wqehc9vv/4/
So it should look like this:
image preview
You can use a pseudo-element like :before for that. And make it slightly bigger than the div. Also position it accordingly. See below
.blue-arrow-right {
width: 0;
height: 0;
position: relative;
float: left;
margin-left: 0px;
margin-top: 5px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #009de1;
}
.blue-arrow-right:before {
content:"";
position:absolute;
left:-30px;
top:-32px;
border-top: 32px solid transparent;
border-bottom: 32px solid transparent;
border-left: 32px solid black;
z-index:-1;
}
<div class="blue-arrow-right">
</div>
I am trying to make this in CSS.
But this is how it renders in IE11.
My code below works in Chrome, but not in IE 11. "www.CanIUse.com" says the clip rule works in IE11. What is wrong with my CSS?
body{margin: 50px;}
.bracket-container {
position: relative;
border: 0px solid green;
width: 25px;
height: 58px;
width: 25px;
padding: 0;
margin: 0;
}
#square-clip{
width: 24px;
height: 50px;
background: none;
border: 4px solid red;
border-left: 0;
border-radius: 8px;
clip: (0, 0,0, 25px);
position: absolute;
left:0;
}
#triangle-right {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 10px solid red;
border-bottom: 8px solid transparent;
position: absolute;
right:-12px;
top: 21px;
}
<h3>Using the new CSS Clip-path</h3>
https://caniuse.com/#search=clip-path</br>
<div class="bracket-container">
<div id="triangle-right"></div>
<div id="square-clip-path"></div>
</div>
<div class="bracket-container">
<div id="triangle-right"></div>
<div id="square-clip"></div>
</div>
No need to use clip at all, nor multiple divs.
Use just one, adjust the borders as needed for the bracket body, then a pseudo element for the triangle with the good ol' borders triangle technique
.bracket{
border: 4px solid red;
width:100px; height:150px;
border-left:none;
border-radius:0 10% 10% 0;
position:relative;
}
.bracket::after{
content:"";
width:20px; height:20px;
position:absolute;
left:100%;
top:50%; transform:translateY(-50%);
box-sizing:border-box;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
border-left:15px solid red;
}
<div class="bracket"> </div>
I am trying to make a basic button box with an arrow at the top of it...
http://jsfiddle.net/8K4qB/ --this is what it comes out to.. i can't make it align at the top in the middle of the bottom.
HTML Code
Read More
CSS Code
.button {
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: #2ecc71;
}
.test:before {
content:'';
position: absolute;
width: 0;
height: 0;
border-bottom: 20px solid #3498db;
border-right:50px solid transparent;
border-left:50px solid transparent;
}
I'd like it to look like the pic
In order to achieve the specific behaviour you're after you need to change your HTML as well as your CSS- otherwise centrally justifying a pseudo element correctly will elude you.. Change the elements in the example as required (e.g. the top level div can be changed to a.button.test)
REVISED FIDDLE
HTML
<div>
<div></div>
<div>text goes here</div>
</div>
CSS
div {
display:inline-block;
text-align:center;
}
div div:first-child {
display:block;
width: 0;
height: 0;
border-bottom: 10px solid darkorange;
border-right:30px solid transparent;
border-left:30px solid transparent;
margin: 0 auto;
}
div div:last-child{
display:block;
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: darkorange;
position:relative;
text-transform:uppercase;
}
Try this ,display:block so that your arrow still in the middle: DEMO
CSS:
.button {
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: #2ecc71;
display:block;position:relative;top:20px;
}
.test:before {
content:'';
position: absolute;
top:-20px;
width: 0;
height: 0;
border-bottom: 20px solid #3498db;
border-right:50px solid transparent;
border-left:50px solid transparent;
}
.middle{
padding-left:15px;
}
HTML:
<span class="middle">Read More</span>
I have a little problem with CSS 3, namely I would create such an object with a single item.
Here's an image of what I want to achieve:
Here's what have I:
CSS:
body{
background:grey;
padding:10px;
}
#talkbubble {
margin:0 auto;
box-shadow: 3px 10px 7px #deefe5;
width: 590px;
height: 160px;
background: white;
position: relative;
border-radius:10px;
border-bottom-left-radius:0px;
}
#talkbubble:before {
box-shadow: 10px 10px 5px #deefe5;
content:"";
position: absolute;
background:white;
top: 100%;
width: 228px;
height: 62px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#talkbubble:after{
content:"";
position: absolute;
top:100%;
left:228px;
border-top: 10px solid white;
border-right: 10px solid transparent;
background:white;
}
HTML:
<div id="talkbubble"></div>
And a jsFiddle demo
How do I round off the angle between the two parts?
Taken information from here you can get this:
body
{
background:grey;
padding:10px;
}
#talkbubble
{
margin:0 auto;
box-shadow: 3px 10px 7px #deefe5;
width: 590px;
height: 160px;
background: white;
position: relative;
border-radius:10px;
border-bottom-left-radius:0px;
}
#talkbubble:before
{
box-shadow: 10px 10px 5px #deefe5;
content:"";
position: absolute;
background:white;
top: 95%;
width: 228px;
height: 62px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#talkbubble:after
{
content:"";
position: absolute;
top:100%;
left:228px;
background:-webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 10px, white 10px);
width: 10px;
height: 10px;
}
http://jsfiddle.net/uCRMQ/2
//Just the background shadow doesn't work.
Now background shadow works for this (at this size).
Lg
warappa
Short answer: you can't.
What you've done there has successfully created a box :after the DIV element, but if you start to enter text into the DIV it will not "flow" into the bottom section.
To achieve what you're aiming for in CSS3 you would need at least 3 DIVs and transparency effects, and you still would have the problem with text overflowing.
worx like a charm:
http://jsfiddle.net/42DJh/7/
just replace with this:
#talkbubble:after{
content:"";
position: absolute;
top:100%;
left:228px;
border-top: 10px solid white;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-top-left-radius:10px;
background:transparent;
box-shadow: -3px -3px 1px white;
}
I would like to create a tab or label like look using only CSS and no images if possible. Here is what I mean:
I can create one end but I have not been able to create the triangle point. Is it possible to do this with only CSS?
There are indeed ways to create CSS triangles, here's a part from css-tricks.com:
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
http://css-tricks.com/snippets/css/css-triangle/
Yes, but not while supporting IE7:
<a class="tab">Your label text</a>
.tab {
background: black;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
position: relative;
}
.tab::before {
content: " ";
position: absolute;
right: 100%;
top: 0;
width: 0;
height: 0;
border-width: 35px; /* play with this value to match the height of the tab */
border-style: solid;
border-color: transparent black transparent transparent;
}
This should be a good beginning
http://css-tricks.com/snippets/css/css-triangle/
HTML
<div class="arrow-left"></div>
<div class="arrow-body"></div>
CSS
.arrow-left { float:left; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right:20px solid blue; }
.arrow-body{ float:left; width:200px; height:40px; background-color:Blue;}
Here is another one
<div></div>
div{
width:500px;
height:100px;
background-color:black;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
margin-left:100px;
}
div:before{
width:0;
height:0;
content:"";
display:inline-block;
border-top:50px solid transparent;
border-right:100px solid black;
border-bottom:50px solid transparent;
position:absolute;
left:0;
}
http://jsfiddle.net/e8feE/