Skew & Rotate

by vvv vvvv

HTML

<div class="effect">
  <div>Lorem ipsum dolor sit</div>
  <div>consectetur adipiscing elit</div>
</div>

<p class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique volutpat auctor. Maecenas vel nunc quam.</p>

CSS

body {
    padding: 100px 60px;
    background-color: #000;
    font-family: Arial, sans-serif;
    color: #fff;
}

.effect {
    text-align: center;
    -webkit-transform: skew(-10deg) rotate(-5deg);
    transform: skew(-10deg) rotate(-5deg);
}

.effect > div {
    display: inline-block;
    border: 1px solid #fff;
    padding: 4px;
    font-size: 25px;
    line-height: 1;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

	.effect > div:nth-child(1) { /* The <div> which has the smaller width */
    	border-bottom: 0 none;
	}

.txt {
    margin-top: 50px;
}