css - Triangle shape with background image -

-

i working on project calls 2 triangles hold background images, , links.

here mock how 2 triangles.

triangles background images

currently, have 2 divs span 900x600 each triangle background image. issue having can't hover on transparent part of cinema div reach photo div.

can accomplish design css3 triangles , set background images? thought custom shape made border, border-color.

is possible css3 triangles, , if so, can me code?

here have. 

.pageoption {    position: relative;    width: 900px;    height: 600px;  }  .pageoption .photo {    position: absolute;    top: 0px;    left: 0px;    width: 900px;    height: 600px;    background: url('../images/menuphoto.png') no-repeat 0 0;  }  .pageoption .cinema {    position: absolute;    bottom: 0px;    right: 0px;    width: 900px;    height: 600px;    background: url('../images/menucinema.png') no-repeat 0 0;  }
<div class="pageoption">    <a href="#" class="option photo" id="weddingphoto"></a>    <a href="#" class="option cinema" id="weddingcinema"></a>  </div>

it's easy if use child images links instead of background images. need skew 2 .option elements different transform origins, unskew child images , set overflow: hidden on both .pageoption , .option elements. support good, should work except ie8/7 , opera mini.

demo

result:

triangle images

html:

<div class='pageoption'>   <a href='#' class='option' data-inf='photo'>     <img src='../images/menuphoto.png'>   </a>   <a href='#' class='option' data-inf='cinema'>     <img src='../images/menucinema.png'>   </a> </div>

relevant css:

.pageoption {   overflow: hidden;   position: relative;   width: 40em; height: 27em; } .option, .option img { width: 100%; height: 100%; } .option {   overflow: hidden;   position: absolute;     /* arctan(27 / 40) = 34.01935deg     * need skew 90deg - 34.01935deg = 55.98065deg   */   transform: skewx(-55.98deg); } .option:first-child {   left: -.25em;   transform-origin: 100% 0; } .option:last-child {   right: -.25em;   transform-origin: 0 100%; } .option img {   transform: skewx(55.98deg);   transform-origin: inherit; }

Comments

Post a Comment

Popular posts from this blog

django - How can I change user group without delete record -

-
on website user have 1 group. , user can change group. it's made user.groups.clear() and user.groups.add(new_group) but it's not efficient, because there 2 sql query: delete, insert. how can change group update query? user , group related each other using manytomanyfield . means intersection table exists relating both entities, , if don't specify model map (using through attribute) django creates 1 you. looking @ sources django.contrib.auth.models see that's case. fortunatly, can access intermediary model using through attribute of manager (in case, user.groups.through ). can use regular model. example: >>> alice = user.objects.create_user('alice', 'alice@example.com', 'alicepw') >>> employee = group.objects.create(name='employee') >>> manager = group.objects.create(name='manager') >>> alice.groups.add(employee) >>> alice.groups.all() [<group: employee...
Read more

java - Need to add SOAP security token -

-
i need set custom soap header attribute on jax-ws generated webservice client. case webservice calls must go through proxy server requiring specific token (recieved web request header) present in soap request header. e.g.: 1 carserviceservice service = null; 2 service = new carserviceservice(new url(url), new qname(qname); 3 carserviceendpoint port = service.getcarserviceport(); it seems in line 3 wsdl retrieved , call fails due missing security token. 1 point direction on how done? a detailed example has been mentioned here: creating , deploying jax-ws web service on tomcat 6 this article shows how create , use security token .
Read more

java - EclipseLink JPA Object is not a known entity type -

-
i have strange problem eclipselink , object want persist. have 1 object (keypointlistimpl) stores object keypointimpl in list. persisting keypointimpl objects works great if try persist keypointlistimpl object java.lang.illegalargumentexception says object keypointimpl isn't known entity type. here keypointimpl code: @entity @table(name="keypoints") public class keypointimpl implements keypoint { @id @generatedvalue(strategy = generationtype.identity) private int id; @enumerated(enumtype.string) private detectortype keypointtype; private float x; private float y; private float size; private float angle; private float response; private int octave; private int classid; ... } here keypointlistimpl code: @entity @table(name="keypointlists") public class keypointlistimpl implements keypointlist { @id @generatedvalue(strategy = generationtype.identity) private int id; @onetoone(cascade={ca...
Read more