html - How do I set the background image of a div into two diagonally-separated images? -

-

i have following html/sass structure:

html

<div id="games">   <a class="gameplate" href="#">     <h3>mia <span class="at">@</span> hou</h3>     <h3>90&nbsp;&nbsp;-&nbsp;&nbsp;104</h3>     <p>4th qtr</p>     <p>4:55 </p>     <div class="gameplate--padding"></div>   </a> </div>

css

#games {   border-bottom: 1px solid black;   height: 130px;   vertical-align: middle;   text-align: center; } #games .gameplate {   border: 1px solid gray;   display: inline-block;   width: 120px;   text-align: center;   margin: 5px 3px;   color: #222222;   text-decoration: none; } #games .gameplate h3 {   margin-top: 10px;   margin-bottom: -10px; } #games .gameplate h3 .at {   font-size: 12px;   color: #999999; } #games .gameplate p {   margin-top: 5px;   margin-bottom: -5px;   font-size: 14px; } #games .gameplate--padding {   height: 20px; }

jsfiddle: https://jsfiddle.net/b4lmdh4y/

i'm trying figure out how add diagonally split images games div appear behind text. example, i'm trying take following 2 images:

https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/red.svg/2000px-red.svg.png

https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/solid_black.svg/2000px-solid_black.svg.png

and i'm trying set background of games div this:

enter image description here

i still text appear in front of these images.

it's not easy. take @ example using transform http://codepen.io/dionmm/pen/wrrewr

/*rotate div , position cut rectangle in half*/ .image2{   transform: rotate(329.1deg);   position: absolute;   top: 115px;   left: 77px;   overflow: hidden;   height: 500px;   width: 600px; } /*apply exact opposite amount of rotation .image2 class image appears straight */ /*also align top of rectangle*/ .image2 img{   transform: rotate(30.9deg);   position: absolute;   top: -150px; }

Comments

Post a Comment

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

-
i use delphi xe2 , indy10 udp protocol. can't receive server echo on client side if use receivebuffer method. got "socket error # 10040" although send small echo message server client. console application illustrate problem below. in advance. program project1; {$apptype console} {$r *.res} uses system.sysutils, idglobal, idbasecomponent, idcomponent, idsockethandle, idudpclient, idudpserver, idudpbase, idstack; type tudp_serv = class(tidudpserver) procedure udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); end; var udpserver: tudp_serv; udpcl: tidudpclient; bsnd, brcv: tbytes; s: string; k: integer; //============================================================================== procedure tudp_serv.udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); begin writeln(' server read: ' + tohex(adata, length(adata))); abinding sendto(peerip, peerport, adat...
Read more

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

-
i new windows programming. here goes code objiwbemlocator = new qaxobject("wbemscripting.swbemlocator"); objwmiservice = objiwbemlocator->querysubobject("connectserver(qstring&,qstring&)",qstring("."),qstring("root\\cimv2")); qaxobject* returnlist = objwmiservice->querysubobject("execquery(qstring&)", qstring("select * %1").arg(domain)); qaxobject* result = returnlist->querysubobject("itemindex(int)", 0); i getting error on runtime qt activex wmi qaxbase::dynamiccallhelper: itemindex(int): no such property in but itemindex method exists msdn says the itemindex method not work collections not contain swbemobjects, such swbemmethodset, swbemnamedvalueset, swbemprivilegeset, swbempropertyset, , swbemqualifierset. what selecting ? have tried iterating on collection ? plus need minimum windows vista itemindex method. hope helps
Read more

Enable autocomplete or intellisense in Atom editor for PHP -

-
i'm first time user of atom editor php code. atom can autocomplete built-in functions of php. possible make editor autocomplete custom function written in separate file? function.php <?php function printsomething() { echo "hello world"; } index.php <?php require_once "function.php"; printsomething(); // autocompleted atom editor while typing thanks in advance. there text file in %userprofile%.atom called snippets.cson. in there can add snippet. more this: http://flight-manual.atom.io/using-atom/sections/snippets/ but need think can use later on other files well. otherwise need copy , paste.
Read more