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;
}
Related
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.
I've started working on an app that does image processing and image cropping, using a library called cropper.js. Right now, I've been tasked with investigation and possible implementation of a feature that would take the cropped image and create a visual representation of how a picture frame would look like.
Example:
The difference is, I'm not able to use already stored images, but have to build this type of image using one piece of image that will look like this:
Along with that, I have to somehow cut the side of the image piece under 45 degree angle to be able to reproduce the desired effect.
How would one go about doing this? I've thought of repeating that image piece a couple of times on all four sides, and then somehow cutting the far side parts of the image under 45 degree angle, but have no idea how to go about this :(
Thanks!
The simplest way with pure CSS is taking advantage of multiple-backgrounds for the main frames using 2 images, one vertical and the other is horizontal.
As for the corners, you only need one image of a transparent 45 degrees cut square texture, which will be used in 4 divs, each one is flipped through transform: scale() and positioned to the sides using position: absolute;
.picframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
url('http://i.stack.imgur.com/wyp42.png'), /* top */
url('http://i.stack.imgur.com/wyp42.png'), /* bottom */
url('http://puu.sh/q3NmA/48c4271f4f.jpg'), /* left */
url('http://puu.sh/q3NmA/48c4271f4f.jpg'); /* right */
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: top left, bottom left, top left, top right;
}
.picframe [class^="corner"] {
background: url(http://i.imgur.com/W0Be4ra.png) no-repeat;
height: 62px; width: 62px;
position: absolute;
}
.picframe .corner-t-l {
top: 0;
left: 0;
}
.picframe .corner-t-r {
top: 0;
right: 0;
transform: scale(-1,1);
}
.picframe .corner-b-l {
bottom: 0;
left: 0;
transform: scale(1,-1);
}
.picframe .corner-b-r {
bottom: 0;
right: 0;
transform: scale(-1,-1);
}
<div class="picframe">
<div class="corner-t-l"></div>
<div class="corner-t-r"></div>
<div class="corner-b-l"></div>
<div class="corner-b-r"></div>
</div>
Pros:
Easy to implement
Responsive
Minimal code
Cons:
Might not be the most accurate
Requires creation of 3 images: vertical, horizontal, corner
Requires knowledge of frame size (for corners height/width)
If a one-piece texture is your only option, then you can flip the background by using CSS transform (90 degrees rotation or mirroring with negative scale scale(1,-1) for the main frames (top, bottom, left, right).
The corners are bit more complicated and can be done by making a div that is rotated 45 degrees and has a child or pseudo selector inside that reverses the parent's rotation then applies the background, then hiding the excess with overflow: hidden on the parent corner container:
:root {
--frame-size: 160px;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
[class^="frame"] {
background: url("https://i.gyazo.com/6836b6d12cebf4b0fd9a2758ad3a04a9.png");
position: absolute;
/*outline:1px solid rgba(255,0,0,0.5);*/
}
.frame--top,
.frame--bottom {
width: 100%;
height: var(--frame-size);
top: 0;
left: 0;
}
.frame--bottom {
top: auto;
bottom: 0;
transform: scale(1, -1);
}
/* optional shading for realism */
.frame--top::after,
.frame--bottom::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: RGBA(0, 0, 0, 0.1);
box-shadow: inset 0px 10px 50px rgba(0, 0, 0, 0.25);
}
.frame--left,
.frame--right {
height: var(--frame-size);
width: calc( 100vh - (var(--frame-size)*2));
z-index: 1;
bottom: 0;
left: 0;
transform-origin: 0% 0%;
transform: rotate(-90deg);
}
.frame--right {
bottom: var(--frame-size);
right: var(--frame-size);
left: auto;
transform-origin: bottom right;
transform: rotate(90deg);
}
[class^="frame--corner"] {
height: calc(var(--frame-size)* 1);
width: calc(var(--frame-size) * 1.425);
background: inherit;
overflow: hidden;
left: 0;
top: 0;
z-index: 1;
transform: rotate(45deg);
transform-origin: 0 0;
}
[class^="frame--corner"]::before {
content: '';
position: absolute;
background: inherit;
height: 100%;
width: 100%;
transform: rotate(-135deg);
right: 0;
top: -50%;
}
.frame--corner--tr,
.frame--corner--br {
right: 0;
left: auto;
transform: rotate(-45deg);
transform-origin: 100% 0%;
}
.frame--corner--tr::before,
.frame--corner--br::before {
transform: rotate(135deg);
}
<div class="frame--top">
<div class="frame--corner--tl"></div>
<div class="frame--corner--tr"></div>
</div>
<div class="frame--bottom">
<div class="frame--corner--bl"></div>
<div class="frame--corner--br"></div>
</div>
<div class="frame--left"></div>
<div class="frame--right"></div>
jsFiddle: https://jsfiddle.net/azizn/cb7feu5p/2/
Pros:
Single image (texture)
Responsive
Frame size can be dynamic
Cons:
Might not be the most accurate
Larger amount of code and 8 HTML tags
For this to work as pure CSS, many calculations use a CSS variable (--frame-size), please be sure to check browser compatibility for CSS variables, transforms and calc() expressions. Otherwise, you will need to run all these operations through JavaScript.
You can use the border-image property for this, it should work perfectly for what you're trying to do. It will use the corners of the image for the corners, and will stretch or repeat what is in-between. You can also define the border-width for each border as normal.
The advantage to this method is that it works just like any normal border, therefore there is no worry about scaling or keeping the content always the same size, it will adapt nicely according to the content.
This is how the code would look like, excluding extra code for full browser support:
border-image: url("border.png") 27 fill repeat;
Here's some handy links for browser support & guides:
http://caniuse.com/#search=border-image (I think partial support issues will not be relevant to your case though, as long as you use the shorthand)
https://css-tricks.com/understanding-border-image/
This site makes it really easy to define your borders from the images, as it can be a bit of a pain to count it all manually:
http://border-image.com/
please take a look at the image
My Challenge ist the following. The Blue is a div with a background image. The angle should be -6deg. In this div we have transparent png (here the 2 people). The Peoples head are allowed ^^° to get out of the div. but not the legs. And the Image should be animated so that they can "walk" from left to right.
The Problem is for me, that i have no Idea how to archiv the part with heads can "leave" the box but the legs need a "overflow" hidden.
The Blue box should be 100% in width, so rotate -6deg to the div and +6deg to the people doesnt work.
Thank you for my help. If it shouldnt be clear what my problem ist, just ask. Englisch is not first language ^^ Thanks.
Edit: No "Cover" divs. There is a gradient i need to see. the white area above and beneath the blue has to be transparent.
EDit2: I think i got it ^^ Look at this Thanks to SD. !
https://jsfiddle.net/rsr04udj/
You can try some tricks to cover legs and not heads.
Please check this demo I have create small example with text only. You can replace text with images you have.
<div class="wraper">
<div class="whitebar">
<div class="people">PEOPLE</div>
</div>
</div>
Demo
You could use a combination of z-index and pseudo elements for this kind of functionality, meaning that rather than 'hiding the legs', you can sandwich it behind one skewed pseudo and in front of another, creating this 'bottom hidden and top shown' effect:
JsFiddle Demo
Demo Snippet (view snippet in full screen)
.people {
background: url(http://fs2.directupload.net/images/150304/f48hrkmk.png) no-repeat;
background-size: 200px 300px;
height: 300px;
width: 200px;
position: absolute;
bottom: 0;
left: 0;
z-index: 7;
transition: all 6s;
}
.wrap:hover .people {
left: 100%;
}
.wrap {
height: 400px;
width: 100%;
position: relative;
background: lightblue;
overflow: hidden;
}
.wrap:before {
height: 50%;
width: 100%;
content: "";
position: absolute;
top: -20%;
z-index: 6;
left: 0;
-webkit-transform: skewY(-6deg);
-moz-transform: skewY(-6deg);
transform: skewY(-6deg);
background: white;
}
.wrap:after {
height: 50%;
width: 100%;
content: "";
position: absolute;
bottom: -20%;
z-index: 8;
left: 0;
-webkit-transform: skewY(-6deg);
-moz-transform: skewY(-6deg);
transform: skewY(-6deg);
background: white;
}
<div class="wrap">
<div class="people"></div>
</div>
<div class='wrapper'>
<div class='blue-container'>
<div class='people></div>
</div> //remove overflow hidden
<div class='bottom-div></div> // use this div to hide the legs
z-index: 100;
</div> // make this overflow : hidden
I see that you don't have in your code on the .wrapper class position relative.
This is a problem when you use some inner child as absolute It sometimes can be the reason to some problems like this or unwanted scrollbar.
In case there's no relative parent then the absolute will be relative to the window.
(In case of unwanted scrollbar: There's cases when you want the parent to have the overflow hidden and the absolute with scrollbar i saw some people use to put overflow on the html and the body which is bad practice in my opinion but it can cause more issues than benefits, but it's not your case here).
in your case:
.wrapper{
...
position:relative;
}
for the children (in your case whitebar):
.whitebar {
...
height:600px;
}
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'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;}