I've used CSS border arrows quite regularly, but I don't know if what I want to achieve is possible with them, so I went another route and used pseudo elements instead. I know my solution relies on trigonometry but still don't know how to emplement it.
I need , regardless of the height of my .front div, to be able to maintain the 7PX width, thus, allowing for a flexible height with a fixed width:
.front{
height: 20px;
**width: 7px;**
background-color: darkred;
position: relative;
}
and that implies changing the transform angle in a mathematically controlled way:
.front:after{
content: " ";
height: 30px;
width: 15px;
background-color: lightgreen;
position: absolute;
top:0;
left: 0;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
Is there a simpler way to achieve this? Images are obviously out of the question, because pixellation...
JsFiddle here.
Here's your fiddle with a triangle in the top right corner made purely of CSS. I'm sure that animating it is just a matter of resizing the two border widths.
#top_rt_tri {
position:absolute; top:0px;right:0px;width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 60px 60px;
border-color: transparent transparent #007bff transparent;}
Related
I'm seeking for some advice on creating a "ring" shape in CSS. Here's some important detailed goals I need to achieve:
the ring border thickness must be a percentage number, not rm or absolute pixel number, so that the ring shape can be fully responsive based on container size;
The ring border need to have a background, for my scenario, the background could be sometimes a combination of 3-4 solid colors, or a gradient color;
The filling of the ring must be transparent so user can see the background through it.
Here's a quick example:
Here are a few attempts I used:
Make a border-radius: 50% div with only border width but soon I noticed the border width cannot be a percentage number;
SVG clipping a round div to a ring shape. so far I was not able to successfully make it working... If this is the right approach, please share some snippet.
You can achieve this considering mask where the idea is to use a radial-gradient to create the hole and use fixed value which will make the visible part (the thickness) to be responsive.
.box {
border-radius:50%;
background:linear-gradient(red,purple,orange);
-webkit-mask: radial-gradient(transparent 89px,#000 90px);
mask: radial-gradient(transparent 89px,#000 90px);
}
.box:before {
content:"";
display:block;
padding-top:100%;
}
.container {
margin:0 auto;
max-width:200px;
animation:change 3s linear alternate infinite;
}
#keyframes change{
to {
max-width:400px;
}
}
body {
background:linear-gradient(to right,yellow,pink);
}
<div class="container">
<div class="box">
</div>
</div>
Making responsive rings in CSS is tough. The best I've found is to simply create two circles stacked on top of each other where the top circle's background is the same as the container background. You could do this with 2x elements like in my example or with a pseudo-class.
Pros:
You get lots of control
Easily add other content (like pie charts) since the content is "masked"
Cons:
Background needs to be a flat color and nothing will show through the ring
.outer {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
background-color: #9273B0;
margin: 10px;
cursor:pointer;
}
.inner {
position: absolute;
width: 50%;
height: 50%;
border-radius: 50%;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease-out;
}
.outer:hover .inner {
width: 90%;
height: 90%;
}
<div class="outer">
<div class="inner"></div>
</div>
If you MUST see the background through the ring, I'd look into a SVG clip path but that gets really complicated pretty quick.
In order to maintain percentage values you can try using a radiel-gradient. However the borders tend to get a little choppy looking.
.circle {
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
color: #fff;
height: 100%;
width: 100%;
border-radius: 50%;
background: radial-gradient(ellipse at center,
rgba(255,113,12,0) 60%,
rgba(255,113,12,1) 51.5%);
}
Example: https://codepen.io/SROwl/pen/BMEJzj
You could use vw or vh as a metric. The border-width will be calculated based on the viewport width or height depending what you choose. You'll have to do some calculation of what value you want to use:
.ring {
border: 10vw solid red;
border-radius: 50%;
height: 100%;
position: absolute;
width: 100%;
}
https://codepen.io/anon/pen/ErJbxN?editors=1100
With JS: https://codepen.io/anon/pen/rPbYvm
image1
I am trying to make 3 divs in bootstrap like in this image.Now, I have the code but the problem is, that the before/after elements do not scale with its own div and text.I need to make them responsive, so in small screens, they go one under another.Here is a link withthe bootstrap and scss code: http://www.bootply.com/qYUhoNymFI
The scss code is not applied in your link, so I added classic CSS at the end to show you the way to follow to create triangle.
Here is the code I added :
.shipping,
.support {
position: relative;
background: #d7b789;
color: white;
text-align: center;
}
.returns {
position: relative;
background: black;
color: white;
text-align: center;
}
.shipping:before,
.returns:before,
.returns:after,
.support:after {
content: "";
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 32px transparent;
width: 32px;
height: 32px;
}
.returns:before {
left: 0px;
border-left-color: white;
}
.returns:after {
right: 0px;
border-right-color: white;
}
.shipping:before {
right: -64px;
border-left-color: #d7b789;
z-index: 1;
}
.support:after {
left: -64px;
border-right-color: #d7b789;
z-index: 1;
}
Bootply
What I have done here is to set the background colors to match the example.
Then I set the a width, height (equal to the half of the parent div's height) and border to the before and after we want, and set their border-color to transparent.
On each 'before and after, you then define a border-color on the side you want to have the triangle to start.
You then have to place the left and right on the rights elements to place them where you want.
Notice the z-index I added on the first and last block so you are sure the triangles come over the middle block
Now you could translate this to scss to optimize the code.
For example make a mixin for the multiple transform prefixes so you don't have to repeat them everywhere.
Add a variable for the div's height (64px in the example), and use it also for the border-width ($height / 2), and replace the left: -64px; and right: -64px; using this variable too.
This is driving me insane. I've been using the Firefox inspector to try to figure out how this arrow was made (below) on the Headway site.
I've whittled away the code by deleting chunks via the inspector, and got it down to this:
No matter where I inspect, I can not find any such shape. No background image, no glyphs, nothing. It hardly even matters at this point, but I'm pulling my hair out trying to figure out how they did this!
Any CSS gurus care to take a look and chime in? For the sake of learning. :)
It's just a rotated square in the form of a ::before pseudo element.
As you can see, the element is a square (same height/width). The element is absolutely positioned with left: 50% and a negative margin-left of -31px (half the width) for horizontal centering. Finally, transform: rotate(-45deg) is used to rotate the square.
Here is the styling used:
.home-testimonial-wrapper:before
.home-cta-area::before, {
display: block;
width: 62px;
height: 62px;
background: #253031;
position: absolute;
top: -15px;
left: 50%;
margin: 0 0 0 -31px;
z-index: 5;
content: "";
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Aside from this, if you're interested in seeing how to make a triangle using CSS, see this answer.
You can make a triangle by playing with borders of a zero width/height div:
.triangleDiv {
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px 100px;
border-color: transparent transparent #000000 transparent;
}
<div class="triangleDiv"></div>
Just adjust the border-widths to get the size you want. No need for transforms. By adjusting which borders have width, you can 'rotate' the triangle.
The previous answers are good!
Just wanted to add, for design elements like that I always use one of two things.
Pseudo element to create the design feature ( as described above )
Pseudo element containing the design feature as an svg
Hope that helps!
You can do what they've done with rotating the square, but a more common solution is to use the border property:
.example {
position: relative;
}
.example:after {
content: '';
display: block;
position: absolute;
top: 0; /* or wherever */
left: 0; /* or wherever */
border: 10px solid transparent;
border-bottom-color: #000;
}
I have a rectangular sprite image that is 120px x 40px. When someone select the image I want the right side of the selected image to turn into an arrow pointing right.
I know how to use border-radius but that gives a curves whereas I want a point.
Using css how would I turn the right side of an image into a arrow?
Thanks
Basically I want to perform a border-radius only on the right side, but instead of curved pointed like an arrow.
.selected {
-webkit-border-radius: 0px 25px 25px 0px;
border-radius: 0px 25px 25px 0px;
}
If you can keep the white background here is a very simple solution:
jsFiddle here
Run the image in the background of the following example.
HTML
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
CSS
.container {
background: #333;
width: 200px;
height: 60px;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
.container:hover::after {
content: "";
position: absolute;
width: 70px;
height: 30px;
background: #fff;
top: -20px;
right: -20px;
z-index: 1;
transform: rotate(45deg);
}
.container:hover::before {
content: "";
position: absolute;
width: 70px;
height: 30px;
background: #fff;
bottom: -20px;
right: -20px;
z-index: 1;
transform: rotate(-45deg);
}
I do not know, i understood your question, but i think, what you want to achive, can be done by jQuery and css function with background-position
Basically, if you want to use a CSS Sprite image, background-position will indeed do it.
You may want to have a <div> positionned over your image, that will be displayed on hovering (CSS :hover) or click (jQuery click event) the image, depending on what you meant by "selecting" it.
Here is an example for hovering case (pure CSS) and here is an example for the clicking case (with 3 lines of jQuery).
I have this menu image
I want to code it in plain HTML/CSS to be used for a game I'm creating for a phonegap application. I could just use this image inside the app, but the menu items text must be editable.
So I created an empty image to use as a background:
In Android there's lot of screen resolutions which forces me to use percentage instead of pixel, so first I restricted the game to be played only in portrait mode.
Sofar my approach is;
Use percentage values to position elements.
Use the image above (without the text) as a background and the items as spans.
Check a live demo here.
But this is not accurate; in some devices the text gets out of the area where it should :(
Here's the full game window:
Any hints?
You could achieve something pretty damn close to that JPG using nothing but CSS, it will be tricky though. Additionally, if the target audience is ONLY mobile users, then you don't have to worry about IE8 and below. Doing this in pure CSS would be impossible without CSS3 stuff that IE8 and below doesn't support.
So there is the CSS option... Then there could also be the SVG option. SVG's are vector graphics, meaning they scale infinitely without that nasty pixelating you see in raster graphics (like a jpg). SVG's can also be styled with CSS... Which means you could change the hover color, or the text color by modifying some CSS. The text then would just be overlayed on-top of the graphic. The vector graphic would allow you to scale the image up or down according to your orientation and screen size.
This is about as good as I could get with what I have to work with and limited time. Note that widths, heights, angles, etc can all be adjusted and your widths can be adjusted to be percentage based so they are more dynamic.
JSFiddle Demo
HTML:
<div class="container">
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
</div>
CSS:
.container {
width: 500px;
}
.button {
position: relative;
width: 300px;
height: 40px;
margin: 10px auto 0 auto;
background: #b9aea2;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
}
.button:first-child:before {
content: ' ';
position: absolute;
z-index: -1;
width: 40px;
height: 0px;
top: 14px;
left: -20px;
margin: 0px 0px 0 0px;
border-top: 20px solid transparent;
border-left: 15px solid white;
border-bottom: 20px solid transparent;
-webkit-transform: skew(-5deg);
-moz-transform: skew(-5deg);
-o-transform: skew(-5deg);
background: #b9aea2;
}
.button:last-child:before {
content: ' ';
position: absolute;
z-index: -1;
width: 40px;
height: 0px;
top: 14px;
right: -20px;
margin: 0px 0px 0 0px;
border-top: 20px solid transparent;
border-right: 15px solid white;
border-bottom: 20px solid transparent;
-webkit-transform: skew(5deg);
-moz-transform: skew(5deg);
-o-transform: skew(5deg);
background: #b9aea2;
}
.button:after {
content: ' ';
position: absolute;
display: block;
width: 240px;
height: 10px;
bottom: -10px;
left: 30px;
-webkit-transform: skew(-80deg);
-moz-transform: skew(-80deg);
-o-transform: skew(-80deg);
background: #6b6562;
}
.button:last-child:after {
width: 0;
height: 0;
background: transparent;
}
A few things that might help:
In your CSS, looking at the .menu-game--container class, if you change background-size: center; to background-size: contain;, that makes sure that all of the image is indeed in the picture. Sometimes this doesn't happen.
If you really want to be sure that your text will be in the right place, consider putting the text directly into the image using photoshop or something, and then using a <map> tag for the links.
Finally, I have found that it works better if you use href="javascript:" rather than href="#" and then putting the javascript into the OnClick event or something.