I am trying to make a custom element on a wordpress website. It is one of those downward pointing triangles leading into the next page section, but it also has a number on top of it.
My problem is that the way I have it now, the number becomes hidden behind the background of the section above, and I can't get the number/text to remain ontop, which is exacerbated when seen via mobile. changing the z-index didn't help.
This is the css I am using:
/**to create triangle in middle of page **/
div.arrow-down-tan {
width: 0;
height: 0;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-top: 35px solid #f6f6f6;
position: relative;
left: 50%;
margin-left: -55px;
margin-top: -3%;
padding: 0;
z-index: 2;
}
/**to create text ontop of triangle **/
div.arrow-text {
position: absolute;
left: 50%;
margin-left: -1.25%;
top: -8%;
color: grey;
font-size: 20px;
z-index: 10;
}
And the html I am using (raw html within a wordpress visual composer page section - which may be part of the problem as well since it is the preceding page section's background which is covering the number):
<div class="arrow-down-tan"></div>
<div class="arrow-text">3</div>
Any help would be greatly appreciated. Many thanks!
Not sure if this will work perfectly in mobile..
https://jsfiddle.net/Hastig/n2w9pv08/
css
.d-arrow {
position: absolute;
left: 46%;
width: 0px;
height: 0px;
border-style: solid;
border-width: 40px 30px 0px 30px;
border-color: #CCCCCC transparent transparent transparent;
/* background-color: red; */
}
.d-arrow-text {
position: relative;
margin: -35px 0px 0px -7px;
padding: 0px 0px 0px 0px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size: 20px;
line-height: 20px;
color: #000000;
text-shadow: none;
}
html
<div class="d-arrow">
<div class="d-arrow-text">3</div>
</div>
div.arrow-down-tan {
position: relative;
margin-left: -55px;
margin-top: 0;
padding: 0;
z-index: 2;
}
div.arrow-down-tan:after {
width: 0;
height: 0;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-top: 35px solid red;
position: absolute;
left: 50%;
margin-left: -55px;
margin-top: 0;
padding: 0;
z-index: 2;
content:"";
}
/**to create text ontop of triangle **/
div.arrow-text {
position: absolute;
left: 49.5%;
top: 0;
color: white;
font-size: 20px;
z-index: 10;
}
<div class="arrow-down-tan"><div class="arrow-text">3</div></div>
Related
I'd like to add a speech-bubble point on the top-right corner of my mat-menu-list but it doesn't seem to work. Is this possible?
I attempted wrapping the mat-menu-list with the below code:
.menuPoint {
position: relative;
background: #143342;
color: #FFFFFF;
font-family: Arial;
font-size: 20px;
line-height: 120px;
text-align: center;
width: 250px;
height: 120px;
border-radius: 10px;
padding: 0px;
}
.menuPoint:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-width: 0 0 20px 20px;
border-color: transparent transparent #143342 transparent;
top: -20px;
left: 95%;
margin-left: -10px;
}
<div class="menuPoint"></div>
Are you looking for something like this? I just played a bit around with the position values, removed z-index from the pseudo-element and removed the border-radius from the top right corner where the pseudo-element is generated.
.menuPoint {
position: relative;
background: #143342;
color: #FFFFFF;
font-family: Arial;
font-size: 20px;
line-height: 120px;
text-align: center;
width: 250px;
height: 120px;
border-radius: 10px 0px 10px 10px;
padding: 0px;
/* for demo purpose */
margin-top: 50px;
}
.menuPoint:after {
content: '';
position: absolute;
display: block;
border-style: solid;
border-width: 0 0 20px 20px;
border-color: transparent transparent #143342 transparent;
top: -20px;
right: 0;
}
<div class="menuPoint">hey there!</div>
I want to recreate the button and the border around the League of Legends Play For Free button.
The problem for me is recreating that border with the cut corners. I do not need the animations.
After inspecting their page elements, I could not find any elements responsible for them, and they do not seem to be using CSS to achieve this. I tried turning off a lot of the CSS, and they seem to persist on the page. Could someone please enlighten me on how they are making these borders, or how I can achieve this with pure CSS?
Do you mean a button like the one in this example?
https://codepen.io/awesammcoder/pen/RYVwxa
body {
background: #333;
}
.button {
font-size: 12pt;
color: white;
background: transparent;
display: inline-block;
text-decoration: none;
padding: 10px 20px;
border: 3px solid white;
margin: 20px;
position: relative;
letter-spacing: 1px;
outline: none;
}
.button:before {
content: '';
width: 20px;
height: 20px;
background: #333;
border: 3px solid white;
transform: rotate(45deg);
position: absolute;
border-top: 0;
border-left: 0;
border-bottom: 0;
top: -12px;
left: -13px;
}
.button:after {
content: '';
width: 20px;
height: 20px;
background: #333;
border: 3px solid white;
transform: rotate(-132deg);
position: absolute;
border-top: 0;
border-left: 0;
border-bottom: 0;
top: auto;
right: -13px;
bottom: -12px;
}
<button class="button">Play now</button>
How would I define the degree of an arrow created with css follows
<div class="bubble"></div>
.bubble
{
background: none repeat scroll 0 0 #FF7401;
border: 3px solid silver;
border-radius: 25px;
bottom: 18px;
float: right;
height: 63px;
margin-right: 10px;
padding: 0;
position: relative;
width: 250px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 29px 16px 0;
border-color: #ff7401 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -29px;
left: 47px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 31px 18px 0;
border-color: silver transparent;
display: block;
width: 0;
z-index: 0;
bottom: -34px;
left: 45px;
}
div.bubble p {
color: #FFFFFF;
font-size: 21px;
font-weight: bold;
margin-top: 10px;
text-align: center;
}
http://jsfiddle.net/lgtsfiddler/GpUpZ/1/
What I want is that the arrow's right edge right should be longer and not equal to the left edge. In particular, the left edge should be perpendicular to the text-bubble, and the right edge should come to meet it. For better visualization, here is an example of what I'm trying to achieve:
Modify your css as like this
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 33px 18px 0; // modify this line
border-color: silver transparent;
/* display: block; */ // remove this line
width: 0;
z-index: 0;
bottom: -27px; // modify this line
left: 50px;
-webkit-transform: rotate(-108deg) skew(11deg,-10deg); // modify this line
}
Demo
The shape and direction of the arrow is determined by the individual border widths and colors
A simple adjustment of individual values makes it easy to experiment. It's often also useful to write out the individual values for both widths and colors so see what's what.
JSfiddle Demo
CSS
.bubble {
background: none repeat scroll 0 0 #FF7401;
border: 3px solid silver;
border-radius: 25px;
bottom: 18px;
height: 63px;
margin: 50px;
padding: 0;
position: relative;
width: 250px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
z-index: 1;
top:100%;
left: 47px;
}
.bubble.one:after { /* straight left side */
border-width: 29px 29px 29px 0;
border-color: #ff7401 transparent transparent transparent;
}
.bubble.two:after { /* straight right side */
border-width: 29px 0px 29px 29px;
border-color: #ff7401 transparent transparent transparent ;
}
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
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.