CODEWITHSUNDEEP
css
Peter Penzov
Peter Penzov

Reputation: 1616

Add space at left side

How I can add empty space at the left side of the text?

https://jsfiddle.net/ydL4emkd/

.camera_caption {
  display: inline-block;
  position: relative;
  width: 717px;
  padding: 10px 20% 10px 10px;
  color: white;
  text-decoration: none;
  overflow: hidden;
}
.camera_caption:before,
.camera_caption:after {
  position: absolute;
  content: '';
  height: 50%;
  width: 100%;
  left: -15%;
  z-index: -1;
  background: red;
}
.camera_caption:before {
  top: 0px;
  transform: skew(45deg);
}
.camera_caption:after {
  bottom: 0px;
  transform: skew(-45deg);
}

I need to get this visual result:

enter image description here

Upvotes: 0

Views: 38

Answers (2)

raven
raven

Reputation: 2431

Add more padding to the left

.camera_caption {
 ....
  padding-left: 100px;
}

Upvotes: 2

Nick
Nick

Reputation: 3281

Add padding-left 

.camera_caption {
  display: inline-block;
  position: relative;
  width: 717px;
  padding: 10px 20% 10px 70px;
  color: white;
  text-decoration: none;
  overflow: hidden;
}
.camera_caption:before,
.camera_caption:after {
  position: absolute;
  content: '';
  height: 50%;
  width: 100%;
  left: -15%;
  z-index: -1;
  background: red;
}
.camera_caption:before {
  top: 0px;
  transform: skew(45deg);
}
.camera_caption:after {
  bottom: 0px;
  transform: skew(-45deg);
}
<div class="camera_caption">Some text</div>

<div class="camera_caption">Some text
  <br>spanning across
  <br>multiple line</div>

<div class="camera_caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius eros id consequat tempor. Nunc non libero nisi. Curabitur ultricies, magna eget hendrerit viverra, nibh leo faucibus est, eget efficitur mauris purus ut libero. Ut in arcu in leo
  ornare tristique. Quisque rutrum lectus a lorem sollicitudin porta. Etiam placerat felis metus, non luctus felis placerat et. Nam lacinia libero enim, ut placerat mi accumsan eget. Ut viverra ipsum sit amet leo gravida, ac consequat ligula consequat.
  Etiam consequat ex a augue rutrum, sed convallis est volutpat. Aliquam erat volutpat. Morbi pretium sem nec ipsum sollicitudin facilisis. Maecenas accumsan eleifend neque sit amet ornare. Curabitur condimentum arcu at tellus ullamcorper pretium. Mauris
  lorem nisl, pulvinar eu lectus tincidunt, luctus fringilla diam.</div>

Upvotes: 1

Related Questions