CSS3 triangle shape with link

Posted: November 27, 2015 in CSS 3

HTML

<div class="actions">
	<a href="#" class="button btn-cart">
		<img src="images/demo.png">
	</button>
	<a href="#" class="product-detail">
		<img src="images/demo.png">
	</a>
</div>

CSS

.actions {
    bottom: 0;
    height: 73px;
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 74px;
}
.actions .button.btn-cart img, 
.actions .product-detail img, 
{
    height: 100%;
    transform-origin: inherit;
    width: 100%;
}
.actions .button.btn-cart {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    transform: skewX(1.02deg);
    transform-origin: 50% 0 0;
}
.actions .product-detail {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    transform: skewY(141.02deg);
    transform-origin: 100% 0 0;
}
.actions .product-detail img {
    transform: skewY(38.02deg);
}

Like below :
Capture

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s