relocating a pseudo element

Question

I have the following html/CSS which creates an element on the bottom of a div with an image background

shape created at the bottom of the div ...

enter image description here

HTML

<div style="background-image:url('...');">
    <div class="mask"></div>
</div>

CSS

.mask:before {
    border-left: 0 none;
    border-right: 20px solid transparent;
    left: 0;
}

.mask:after {
    border-left: 20px solid transparent;
    border-right: 0 none;
    right: 0;
}

.mask:before, .mask:after {
    border-bottom: 20px solid #fff;
    content: " ";
    display: block;
    height: 0;
    position: absolute;
    top: 0;
    width: 50%;
    box-sizing: border-box;
}

.mask {
    bottom: 0;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1000;
}

I have this code under my 'mobile' jQuery. I want the shape to rotate (the 'arrow/triangle' point to the side) on screen sizes. But not sure how to rewrite the code to do this.

EDIT

https://jsfiddle.net/hunt0194/gu1sgotd/

not completely sure with mobile, but look into `rotate` and `transform` css functions — Seth McClaine, May 12 '15 at 21:43
As Seth suggested, see MDN: [Using CSS transforms](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms) — Yogi, May 12 '15 at 21:46
I'm not 100% i can just rotate this div with the properties it has. I was thinking rewriting it so the shape is pointing to the side (and put it under .mask2) — user3550879, May 12 '15 at 21:48
You can rotate the element, or change it's border so it points to the desired direction. Also, why do you use an image for the background, if it's only a black section? — Vucko, May 12 '15 at 21:55
Please clarify your question. Are you trying to animate the mask or just flip it to a new direction? And if you're targeting HTML-5 then see this SO post on canvas rotation: [HTML5 Canvas Rotate Image](http://stackoverflow.com/questions/17411991/html5-canvas-rotate-image) — Yogi, May 12 '15 at 22:00
the shape is only black to show its shape (its white in the code) the image has to be a background for numerous reasons to long to explain. I have two columns, the image is either on the right or left, but always on top on mobile screens. so the arrow needs to point in different directions. Site is white background so this way it'll fake masking the image — user3550879, May 12 '15 at 22:00
I don't need animation. its a shape thats created, so I can't rotate the image. It's also responsive. I'm looking to rewrite the code so it is created 'pointing' to the side. I can have new css styles applied — user3550879, May 12 '15 at 22:03
The posted markup does not appear to work as described. For example, the parent div is not position relative so the mask location moves to the bottom of the screen. If you could post a working example then I'm sure someone will offer a solution. Seems like a rather simple problem actually, but the requirements are a bit fuzzy. — Yogi, May 12 '15 at 22:25
made a fiddle, haven't posted a fiddle here before before hope link works https://jsfiddle.net/hunt0194/gu1sgotd/ — user3550879, May 12 '15 at 22:35
need to rewrite code so it points to the left (change css to mask-L) — user3550879, May 12 '15 at 22:36

Vucko · Answer 1 · 2015-05-13T09:14:39.460

If I understood you correctly, you need the arrow to point left/right on the bottom of you div? Here're all the solutions:

(Also, you can use just one pseudo element for creating arrows.)

.main{
  background:red;
  height:50px;
  position:relative;
  margin-bottom: 100px;
}

.arrow{
  content: '';
  position:absolute;
  width: 0;
  height: 0;
  border-style: solid;
  margin-left: -15px;
  left:50%;
}

.bottom{
  bottom: -30px;
  border-width: 30px 30px 0 30px;
  border-color: red transparent transparent transparent;  
}

.up{
  bottom: -30px;
  border-width: 0 30px 30px 30px;
  border-color: transparent transparent red transparent;  
}

.left{
  bottom: -60px;
  border-width: 30px 30px 30px 0;
  border-color: transparent red transparent transparent;  
}

.right{
  bottom: -60px;
  border-width: 30px 0 30px 30px;
  border-color: transparent transparent transparent red;
}

<div class="main">
  <div class="arrow bottom"></div>
</div>

<div class="main">
  <div class="arrow up"></div>
</div>

<div class="main">
  <div class="arrow left"></div>
</div>

<div class="main">
  <div class="arrow right"></div>
</div>

Also, See CSS triangle generator

As for the "I want the shape to rotate (the 'arrow/triangle' point to the side) on screen sizes", just use media-queries with posted styles - JSFiddle

relocating a pseudo element

1 Answers1