I'm trying to make a "priority marker" in css. I have a couple of issues. First: the text is not centered reasonably at all. Second: I'd prefer the width (at least) to change dynamically with the length of the text. Is either doable?
result:
My understanding of how to pick a font that fits with in this context is beyond my current css skills. If this has been done I don't really care to reinvent this...
.box {
border-color: orange;
border-style: solid;
text-align: center;
border-width: 1px 0px 1px 1px;
margin: 0px 8px 0px 0px;
background-color: yellow;
padding-right: 8px;
position: relative;
height:14px;
width:20px;
}
.arrow {
border-color: transparent transparent transparent orange;
border-style: solid;
border-width: 8px;
position: absolute;
right: -15px;
bottom: -1px;
height:0;
width:0;
}
.arrow2 {
border-color: transparent transparent transparent yellow;
border-style: solid;
border-width: 7px;
position: absolute;
right: -12px;
bottom: 0px;
height:0;
width:0;
}
<div class="{style.box}">42
<div class="{style.arrow}"></div>
<div class="{style.arrow2}"></div>
</div>
Add this to .box:
font-size:12px;
font-family:serif;
display:inline-block;
padding-left:5px;
And remove its width rule.
Related
I draw this shape my web site , I don't know if any shape in this page can be edited to look like the shape I need.
this is about what you need, but it might need to be adjusted a little:
.title{
background-color: #000;
height: 70px;
line-height:70px;
font-size:30px;
width:200px;
text-align: center;
color: #fff;
margin-left: 100px;
margin-top: 20px;
padding-right:30px;
position: relative;
box-shadow: -20px -7px 0 yellow;
}
.title:after, .title:before{
content: "";
position: absolute;
left: -70px;
top: 0;
border-color: #000 #000 transparent transparent;
border-style: solid;
border-width: 35px;
z-index:2;
}
.title:after{
border-color: yellow yellow transparent transparent;
z-index:1;
left: -90px;
top: -7px;
}
<div class="title">
Coin blanks
</div>
I'm trying to make this image I found on Dribbble using Codepen.
I've made the bike, but I can't get the light.
I've tried several times using overflow:hidden and it isn't working.
Do you have an idea of how to do this?
What I'm trying to do is :
web here
Use triangles instead of a trapezium. You can cover the tip of said triangle with the light.
Tweak the numbers, but here's the general idea: http://jsfiddle.net/cZQmH/ http://jsfiddle.net/cZQmH/1/ (added browser compatibility)
<div class="light">
<div class="top triangle"></div>
<div class="bottom triangle"></div>
</div>
Where each "triangle" is actually just covering up the corner
.light { /* Just a big box. Where the magic happens*/
padding:50px 0px;
position: absolute;
background: -webkit-linear-gradient(left, rgba(255,255,255,1),rgba(255,255,255,1), rgba(255,255,0,0)); /* should add other compatibility things */
height: 75px;
width:200px;
}
.triangle {
width: 50px;
position: absolute;
left: 0;
}
.top { /*Covers top corner*/
top:0;
border-top: 100px solid #ff0;
border-right: 100px solid transparent;
}
.bottom { /* Covers bottom corner */
bottom:0;
border-bottom: 100px solid #ff0;
border-right: 100px solid transparent;
}
The final CSS is a bit verbose, but if you're using LESS or SASS it should come out pretty cleanly.
What it comes down to is not using the border itself, but using a gradient negative image. You could experiment with the border-image it's just as well supported as Gradients but I came up with this solution first. It does look like it's possible however
Also: could you post a link to the completed bike? I'd be curious to see how you handle all of those curves.
html
<div class="light">
<div id="trapezoid"></div>
<div id="trapezoid-two"></div>
</div>
css
.light{
background-color: yellow;
width: 400px;
height: 200px;
}
#trapezoid {
top: 50px;
left: 150px;
position: absolute;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
height: 16px;
border-right-width: 160px;
border-right-style: dashed;
border-right-color: white;
}
#trapezoid:before {
content: '';
position: absolute;
width: 40px;
height: 10px;
-webkit-box-shadow: 3px 0 130px 80px white;
left: 160px;
border-radius: 50px;
background-color: white;
}
#trapezoid-two{
top: 60px;
left: 200px;
position: absolute;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
height: 6px;
border-right-width: 160px;
border-right-style: solid;
border-right-color: white;
}
So I'm drawing elements in CSS, using this tutorial as a guide. I need some help with borders, though. For instance, here's my code for a curved trapezoid:
.foobar {
height: 0px;
width: 140px;
position: relative;
border-bottom: 200px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom-left-radius: 150px 70px;
border-bottom-right-radius: 100px 25px;
}
The problem: I want to draw a 1px line border around the foobar element, but I'm already using the border properties to draw the element in the first place.
Is there an easy way to do this? My sense is that I'll have to create a shadow element that is the same shape as -- but slightly larger than -- the foobar element.
Thanks in advance!
You can position a :pseudo element behind with slightly adjusted dimensions.
.foobar, .foobar:before {
height: 0px;
width: 140px;
position: relative;
border-bottom: 200px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom-left-radius: 150px 70px;
border-bottom-right-radius: 100px 25px;
}
.foobar:before {
content: "";
display:block;
position: absolute;
left: -31px;
top: -1px;
width: 142px;
z-index: -1;
border-bottom: 202px solid black;
/* add these lines if you're a pixel perfectionist */
border-bottom-left-radius: 150px 71px;
border-bottom-right-radius: 100px 26px;
}
http://jsfiddle.net/4vNGL/2
You can use a pseudo element drawn behind with same rules with a small increase of scale.
.foobar, .foobar:before {
height: 0px;
width: 140px;
position: relative;
border-bottom: 200px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom-left-radius: 150px 70px;
border-bottom-right-radius: 100px 25px;
position:relative;
}
.foobar:before {
content:'';
position:absolute;
display:block;
z-index:-1;
top:0;
left:-30px;
width: 140px;
-webkit-transform-origin:center;
-webkit-transform:scale(1.03);/* adapt here the width of your fake border */
transform-origin:center;
transform:scale(1.03);
border-bottom: 200px solid black; /* color of fake border */
}
http://codepen.io/gc-nomade/pen/eDIGJ
You can even play with both pseudo-element and still add some shadows: http://codepen.io/gc-nomade/pen/axmsc
My code is very simple, but I'd like to move the css3 triangle to the middle of the text "click". could someone please help me?
**HTML**
<li>click</li>
**CSS**
li{list-style:none; }
.arrow{
width: 0px;
height: 20px;
border-style: solid;
display:block;
border-width: 0 5px 8px 5px;
border-color: #000 transparent;
}
ONLINE CODE: http://jsfiddle.net/8rRyf/
I'm not sure if there is a way to position borders, but something like this should do the trick.
li{list-style:none; }
a {
display: block;
width: 40px;
}
.arrow{
position: relative;
width: 0px;
height: 0px;
margin: 0 auto;
border-style: solid;
display:block;
border-width: 0px 5px 8px 5px;
border-color: #000 transparent;
}
<li>click<span class="arrow"> </span></li>
http://jsfiddle.net/8rRyf/19/
I dont want to add any extra element, so far this is the only way could figure it out.
Added text-indent in li did the trick!
li{list-style:none; margin-left:20px; text-indent: -8px;}
.arrow{
width: 0px;
height: 20px;
border-style: solid;
display:block;
border-width: 0 5px 8px 5px;
border-color: #000 transparent;
}
http://jsfiddle.net/8rRyf/24/
I want to make a CSS only speech bubble. So far, I have this...
Example
CSS
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -15px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
jsFiddle.
...which is almost exactly what I want. However, I want a light border around the whole thing.
Obviously, on the main portion, that is simple as adding border: 1px solid #333 to the div.
However, as the tail of the bubble is a border hack, I can't user a border with it.
I tried setting a box shadow of 0 0 1px #333 but browsers apply the border to the rectangular shape of the element (which I guess is what they should do).
jsFiddle.
My next thoughts were finding a Unicode character that looks like a bubble tail and absolutely positioning it there, with text-shadow for the border and using z-index of the main bubble to hide the top shadow of the text.
What Unicode character would be suitable for this? Should I do something different? Do I need to resort to an image?
I only have to support Mobile Safari. :)
<div>Hello Stack Overflow!<span></span></div>
div span:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -51px;
margin-left: -15px;
border-width: 20px 20px 30px 20px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
http://jsfiddle.net/QYH5a/
For the Unicode character approach you suggested, the most appropriate would be ▼ U+25BC BLACK DOWN-POINTING TRIANGLE. I don't know whether iOS has glyphs for it.
Here is a similar solution:
http://jsfiddle.net/JyPBD/2/
<div>Hello Stack Overflow!<span></span></div>
body {
background: #ccc;
}
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 1px solid #333;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -16px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: green transparent transparent transparent;
}
div span
{
border-color: #FF0000 transparent transparent;
border-style: solid;
border-width: 25px 15px;
bottom: -51px;
margin-left: -65px;
position: absolute;
z-index: 10;
}
You could use the filter property with box-shadow() to do it...
-webkit-filter: drop-shadow(1px 1px 1px #111) drop-shadow(-1px -1px 1px #111);
jsFiddle.