html - Diagonal CSS3 Background Color/Images -


basically trying cut background of div off @ angle. please see image below example: notice navigation section cut off , header image below.

http://imgur.com/fst4r9t

is there way create effect using css3? have tried this:

.site-header {     background-color: #0c3063;     width: 960px;     height: 300px;     @include clearfix;     position: relative;     z-index: 1;      &:after {         content: "";         width: 100px;         position: absolute;         top: -162px;         right: -150px;         width: 300px;         height: 300px;         background-color: black;         transform: rotate(45deg);         z-index: 2;     } }

in example above overlaps know how fix this, use before instead of after. there better way of doing this?

my example seems can not put :after content before parent solution not ideal :( ideas?

edit: https://jsfiddle.net/6x3yenge/1/

thanks

though following code not achieve want image, surely job top menu. using borders create triangles simplies things lot.

jsfiddle link: https://jsfiddle.net/qvjhptpy/

html:

<body>     <div class="menu">         <div class="main"></div>         <div class="cut"></div>     </div> </body>

css:

body {     background: yellow; }  .menu {     background: transparent;     font-size: 0px;  /*in case gap coming between .main & .cut nested divs (due whitespace in html code)*/ }  .main {     display: inline-block;     width: 200px;     height: 100px;     background: red; }  .cut {     display: inline-block;     border: 50px solid transparent;     border-top: 50px solid red;     border-left: 50px solid red; }

Comments

Post a Comment

Popular posts from this blog

searchKeyword not working in AngularJS filter -

i writing app using angularjs on front end. want search through table word/field; 1 search box everything. according article here: http://hello-angularjs.appspot.com/searchtable can use filter: searchkeyword this. this code, , not working expected. <label>search: <input ng-model="searchkeyword"></label> <table ng-repeat="post in posts | orderby: sort | filter: searchkeyword"> <tr> <td> {{index(post)}} </td> <td> {{post.title}} </td> <td> {{post.author}} </td> <td> {{post.content}} </td> <td> {{post.date | date: "d/m/yyyy"}} </td> </tr> </table> what should do? thank you try this: controller $scope.posts = [ {title:'title one', author:'author one', content: 'content one'}, {title:'title two', author:'author two', content: 'cont...
Read more

sequelize.js - Sequelize: sort by enum cases -

i have model ( article ) field (the name type ) of type enum('source', 'translated') , return 1 article ordered type field. source articles should returned before translated articles. like: article.findone(order: [ { type: [ 'source', 'translated' ] } ]); unfortunately there appears no built-in solution sorting enums. instead have sort by case , couldn't find documentation on how sequelize. what conventional approach here? sorting case hard in sequelize, sort field (the second answer in linked post) should possible: order: sequelize.fn('field', sequelize.col('type'), 'source', 'translated') it's supported mysql far know though
Read more

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
Read more