CODEWITHSUNDEEP
htmlcssimagegeometry
stinkokenzo
stinkokenzo

Reputation: 35

Triangular image with CSS

I've searched everywhere for many weeks but I can't find an answer for my problem.

Is it possible to have an image inside a regular triangle?

I've seen many ways to create a shape or a mask, but I need a real triangle because I need to have several triangles next to each other, with some of them aligned upside-dwn, like in this= image:

http://www.tiikoni.com/tis/view/?id=d49c960

I've used color to divide the two types of triangle, but all of them have images instead colors.

I've tried using skewX, skewY and rotate, I have a sufficient result but it's not perfect:

<div class='pageTri2'>
<a href='#' class='option2'>
    <img src='image.jpg'>
</a>
</div>

<style>
.pageTri2 {
    overflow: hidden;
    position: relative;
    margin: 40px auto;
    width: 250px; height: 250px;
    display: inline-block;
}
.option2, .option2 img { width: 100%; height: 100%; }
.option2 {
    overflow: hidden;
    position: absolute;
    transform: skewX(-25deg) skewY(45deg);
    transform-origin: 50% 50% 0;
}
.option2:first-child {
    transform-origin: 100% 0;
}
.option2:last-child {
    transform-origin: 0 100%;
}
.option2 img { opacity: .75; transition: .5s; }
.option2 img:hover { opacity: 1; }
.option2 img, .option2:after {
transform: skewX(-20deg) skewY(-20deg) rotate(-50deg);
transform-origin: 0 100% 0;
}
.option2:first-child:after { top: 0; left: 0; }
.option2:last-child:after { right: 0; bottom: 0; }
</style>

Is it possible to have a perfect result? Or maybe I'm thinking in the wrong direction?

Thanks Ale

EDIT: I've done it!! Thanks to @Spudley for address me to SVG and thanks to @o.v. for the suggestion to use jsfiddle.

Here's my code: http://jsfiddle.net/wkJKA/

Upvotes: 2

Views: 1867

Answers (3)

Oleg
Oleg

Reputation: 24988

You could rely on specifics of border rendering to achieve a triangle-looking shape. The shape could then be added with pseudoelements.

.pointy:before {
  border:50px solid transparent;
  border-bottom:86px solid green;
  border-top:0px solid transparent;/*renders looking like a triangle with 100px sides*/
  width:0;
  height:0;
  display:inline-block;
  content:"";
  margin:0 -75px -5px 0; /*for a 50x50 icon*/
}

Fiddled

Upvotes: 1

Spudley
Spudley

Reputation: 168655

In all seriousness, having seen your mock-up image of what you're trying to achieve, I'd say drop the idea of doing it in CSS.

Stuff like this is much better done using SVG rather than CSS. CSS simply wasn't designed for creating complex shape patterns. It can do it, but it gets messy quickly, and for something like the effect you're after, you'll end up needing some extra HTML markup. SVG is designed for exactly this kind of thing, and does it well.

The only downside is lack of support for SVG in old IE versions, but there are work-arounds for this. (and in any case, old-IE support clearly isn't a priority for you, given that you're already using transform and other CSS that doesn't work with old IE)

Upvotes: 6

BobbyZ
BobbyZ

Reputation: 336

use transparent png or simply do triangles with css. Here is a link to css shapes http://www.css3shapes.com

Upvotes: 3

Related Questions