I am using the following code and want to add a triangle either in the css3 format or the image based
here is my css
<div id="middleMenu">
<span class="selected">
View Stuff
</span>
<span class="text">
View Gnen
</span>
</div>
Here is the css for the above
#middleMenu {
position: absolute;
width: 300px;
margin: 84px 40%;
padding-top: 5px;
color: #fff;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
}
.traingle {
background: url(../images/arrow.png) no-repeat;
top: 31px;
left: 15px;
position: relative;
text-indent: -9999px;
}
#middleMenu span.selected {
background: url(../images/middleMenu.png) repeat;
color: white;
padding-top: 14px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 14px;
}
.text {
top: 10px;
}
#middleMenu span {
color: white;
padding-top: 14px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 14px;
}
files added which help generating the arrow key
You can create a triangle in CSS like so:
#Triangle pointing upwards
.div {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
}
#Triangle pointing downwards
.div {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #000;
}
jsfiddle.net/dPB75/2
I'm sure you can see where this is going to create one facing left or right.
You can change the size of the triangle by the width of the borders.
Also, you misspelled triangle
Related
I'm trying to create a button.
How can I create a border left like this image?
<a class="genericBtn">
<span>Click Me</span>
</a>
.genericBtn {
cursor: pointer;
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
font-size: 20px;
margin: 10px 0 0;
padding: 20px 50px 20px 50px;
width: auto;
}
You can consider a gradient coloration for the left side:
.genericBtn {
cursor: pointer;
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
/**/
border-left:none;
background:linear-gradient(to bottom,#c40009 20%,transparent 20%,transparent 80%,#c40009 0) left/1px 100% no-repeat;
/**/
font-size: 20px;
margin: 10px 0 0;
padding: 20px 50px 20px 50px;
display:inline-block;
}
<a class="genericBtn">
<span>Click Me</span>
</a>
Another syntax for the same effect:
.genericBtn {
cursor: pointer;
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
/**/
border-left:none;
background:
linear-gradient(#c40009,#c40009) top left,
linear-gradient(#c40009,#c40009) bottom left;
background-size:1px 20%;
background-repeat:no-repeat;
/**/
font-size: 20px;
margin: 10px 0 0;
padding: 20px 50px 20px 50px;
display:inline-block;
}
<a class="genericBtn">
<span>Click Me</span>
</a>
A quick hack with :before
.genericBtn {
position: relative;
cursor: pointer;
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
font-size: 20px;
padding: 0 50px;
height: 50px;
display: inline-block;
width: auto;
line-height: 50px;
}
.genericBtn:before {
position: absolute;
top: 10px;
left: -1px;
width: 1px;
height: 30px;
background: #fff;
content: "";
display: block
}
<a class="genericBtn">
<span>Click Me</span>
</a>
Adjust heights according to requirements.
I've try to made in CSS a "clamp effect".
See image:
https://s27.postimg.org/j6m72z5kj/h_transylvania.png
I do not know exactly how this effect is named, so I called him "clamp effect".
Can someone tell me why ::after does not working?(to can have that "clamp effect" - see link with the image).
My code:
h2 {
margin-top: 40px;
}
.container {
background-color: #fff;
width: 250px;
height: auto;
padding: 20px;
}
img.mypicture {
width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 1px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-right-color: transparent;
position: absolute;
top: 29px;
left: 0;
}
<div class="container">
<h2>Beautiful Flower</h2>
<img class="mypicture" src="https://upload.wikimedia.org/wikipedia/commons/f/fe/Frangipani_flowers.jpg" />
<div class="recomandded">RECOMMENDED</div>
</div>
An absolute element will relate to it's parent only if it's in non static, default, position, therefore I've added position: relative to the container, in the example.
I've also fixed the required definitions to match the provided example image.
Here is the fixed CSS:
h2 {
margin-top: 40px;
}
.container {
position: relative;
background-color: #fff;
width: 250px;
height: auto;
padding: 20px;
}
img.mypicture {
width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 8px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-left-color: transparent;
position: absolute;
top: 20px;
left: 0;
}
Or have yourself a fiddle example
Hope it helps
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 7 years ago.
I'm Trying to create a banner with a triangular shape at the end.
.wrapper {
padding: 50px;
font-size: 0px;
line-height: 0%;
width: 0px;
border-top: 20px solid gray;
border-bottom: 20px solid gray;
border-right: none;
}
<div class="wrapper">TEXT HERE</div>
Just helping you out with this as you've tried but it didn't worked as you expected... So basic idea is that we can use CSS pseudo elements to create that effect..
.wrapper {
background: #C3C3C3;
padding: 20px;
font-size: 40px;
font-family: Arial;
text-align: center;
position: relative;
}
.wrapper:after {
content: "";
width: 0;
height: 0;
border-top: 42px solid transparent;
border-bottom: 42px solid transparent;
border-right: 40px solid white;
position: absolute;
right: 0;
top: 0;
}
<div class="wrapper">TEXT HERE</div>
Here, am doing nothing fancy, we are using a pseudo element i.e nothing but a virtual element which doesn't exist in the DOM but we can insert it using CSS and positioning that pseudo element to the right side of your wrapper. This will help you get the ribbon like end. Note that the color of the triangle is hard coded and it's not transparent.
here is the fiddle. https://jsfiddle.net/nileshmahaja/s5egaebr/
I have used :after selector to the wrapper div.
CSS
.wrapper {
padding: 0 50px;
font-size: 0px;
line-height: 0%;
width: 0px;
height:120px;
background:#ddd;
position:relative;
width:500px;
}
.wrapper:after {
content:'';
width: 0px;
height: 0px;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-right: 60px solid #fff;
position:absolute;
right:0
}
Try this it works
.wrapper {
font-family: arial;
font-size: 12px;
color: white;
background-color: black;
border: 1px solid white;
padding: 8px;
width: 100px;
text-align: center;
position: relative;
}
.wrapper:after {
content: '';
position: absolute;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-right: 16px solid white;
z-index: 10;
top: 0px;
right: 0px;
}
<div class="wrapper">TEXT HERE</div>
I am interested in creating something like the picture below. A counter box with a transparent background and a thin border, plus an icon in the bottom of that semi circle.
I made something like what I want, see below:
.chartBottom{
width:0;
height:0;
border:60px solid #c45;
border-bottom:60px solid transparent;
border-radius: 60px;
}
But the problem of this trick is that it can't have any transparent background. Any ideas?
use this code instead of using border 60px and setting width and height to zero.use width and height and border 1px;
.chartBottom{
width:60px;
height:60px;
border:1px solid #c45;
border-bottom:1px solid transparent;
border-radius: 60px
}
here is jsfiddle for you to see.
I think this fiddle should help you.
<div class="wrapper">
<div class="chartBottom"></div>
<div class="icon">Icon</div>
</div>
.chartBottom {
width:120px;
height:120px;
border:1px solid #c45;
border-bottom:1px solid transparent;
border-radius: 60px;
}
.icon {
position: relative;
height: 40px;
width: 60px;
top: -30px;
left: 30px;
text-align: center;
border: 1px solid green;
}
.wrapper {
background-color: rgba(0,0,0,0.5);
padding: 3px;
width: 126px;
}
.circleDiv{
width:120px;
height:120px;
border-right:1px solid white;
border-top:1px solid white;
border-left:1px solid white;
border-bottom:1px solid transparent;
border-radius: 50%;
}
Demo
It's pretty easy to add an absolute-positioned icon inside the relative-positioned container (see fiddle).
As for making it responsive, I recommend using media queries to adjust the values to keep the design tight (not included in fiddle).
http://jsfiddle.net/1gtss907/5/
<div class="container">
<div class='chartBottom'>
<h4>56</h4>
<i class="fa fa-thumbs-up"></i>
</div>
<p>Projects done this year</p>
</div>
body {
background: #222;
font-family: "Helvetica Neue", sans-serif;
}
.container {
padding: 8em;
text-align: center;
}
.chartBottom{
border:1px solid #1abc9c;
border-bottom:1px solid transparent;
border-radius: 50%;
color: #fff;
font-size: 20px;
height: 150px;
line-height: 150px;
margin: 0 auto;
position: relative;
text-align: center;
width: 150px;
}
h4 {
font-size: 55px;
font-weight: 900;
margin-top: 0.75em;
}
p {
color: #999;
font-size: 15px;
font-weight: 300;
margin: 5px auto 0;
width: 100px;
}
i {
color: #16a085;
opacity: 0.75;
position: absolute;
bottom: 0;
left: 45%;
}
I am using a responsive design (bootstrap) with the following concept in mind:
Large responsive image, two buttons float over the image at the bottom of the image, buttons adjust relative to the image size as window size changes.
<div>
<span class="graphic-buttons" id="graphic-button-1">Button1</span>
<span class="graphic-buttons" id="graphic-button-2">Button2</span>
<div>
<img src="images/home/test.jpg"/>
</div>
</div>
.graphic-buttons {
text-align:center;
font-size: 1.3em;
font-style:italic;
font-weight: 700;
line-height: 40px;
color: #000;
height: 40px;
padding: 10px 15px 10px 15px;
border-radius: 5px;
border: 1px solid #FFF;
box-shadow: 5px 5px 5px #000;
background: #FFF;
}
#graphic-button-1{
position: absolute;
bottom: 0;
right: 0;
}
#graphic-button-2{
position: absolute;
bottom: 0;
left: 0;
}
However, the buttons are positioning themselves further down past the image height and into content lower than the image.
I tried display: table-cell, vertical-align:bottom for the buttons but that has not worked.
Thanks.
You need to set parent as relative for positionning.
See comments in code revisited :).
<div class="bt_img">
<span class="graphic-buttons" id="graphic-button-1">Button1</span>
<span class="graphic-buttons" id="graphic-button-2">Button2</span>
<div>
<img src="images/home/test.jpg"/>
</div>
</div>
.bt-img {
position:relative;/* childs in absolute will refer to area where .bt-img is displayed */
}
.graphic-buttons {
text-align:center;
font-size: 1.3em;
font-style:italic;
font-weight: 700;
line-height: 40px;
color: #000;
height: 40px;
padding: 10px 15px 10px 15px;
border-radius: 5px;
border: 1px solid #FFF;
box-shadow: 5px 5px 5px #000;
background: #FFF;
}
#graphic-button-1{
position: absolute;
bottom: 0;
right: 0;
}
#graphic-button-2{
position: absolute;
bottom: 0;
left: 0;
}
img {
vertical-align:top; /* or bottom: = removes it from baseline and shows no gaps under */
}