Crop triangle from image in CSS -

-

our designer wants that:

crop

but can't figure out way triangle crop:

  • with :after takes width , uses kind of borders trick make triangle
  • with big :after element rotated , white, should not hide other text
  • with magic filter don't know?
  • by using canvas, cropping in js, loading image base64 url? (maybe overkill :d)

what think?

edit: version 2: http://jsfiddle.net/mtau8/4/ works changing bg.

here ya go: http://jsfiddle.net/mtau8/

html: (i used div background, use img element.)

<div class="container">     <div class="img"></div> </div>

css: (mostly fluff setup, use transform:rotate() on :after content, position slices picture nicely. contain in container , you're go.)

.container {     width: 250px;     height: 100px;     position: relative;     overflow:hidden; } .img {     width: 250px;     height: 100px;     background-color: blue;     position: relative; } .img:after{     content:"";     position: absolute;     width: 400px;     height:125px;     background-color: white;     top:90px;     left:-20px;    transform: rotate(5deg);    -moz-transform: rotate(5deg);    -webkit-transform: rotate(5deg);  }

Comments

Post a Comment

Popular posts from this blog

c++ - How to add Crypto++ library to Qt project -

-
Image
i downloaded crypto++ source , compiled cryptlib project in visual studio 2013, , added generated .lib file qt project, made .pro file this: qt += core gui qt += sql greaterthan(qt_major_version, 4):qt += widgets target = untitled template = app sources += main.cpp\ mainwindow.cpp headers += mainwindow.h \ databasecontrol.h \ test.h forms += mainwindow.ui win32:config(release, debug|release): libs += -l$$pwd/ -lcryptlib else:win32:config(debug, debug|release): libs += -l$$pwd/ -lcryptlibd else:unix: libs += -l$$pwd/ -lcryptlib includepath += $$pwd/ dependpath += $$pwd/ win32-g++:config(release, debug|release): pre_targetdeps += $$pwd/libcryptlib.a else:win32-g++:config(debug, debug|release): pre_targetdeps += $$pwd/libcryptlibd.a else:win32:!win32-g++:config(release, debug|release): pre_targetdeps += $$pwd/cryptlib.lib else:win32:!win32-g++:config(debug, debug|release): pre_targetdeps += $$pwd/cryptlibd.lib else:unix: pre_targetdeps += $$pw...
Read more

c++ - Serialize a class with a Qlist of custom classes as member (using QDataStream) -

-
i'm trying serialize class lesson(my custom class[i removed setters]), includes qlist(question custom class). during test serialization sigsegv(segmentation fault) when deserializing object of qlist inside class lesson. upd1: serialized qlist* , changed qlist, sigsegv still appears. class lesson { public: lesson(); lesson(qstring, qstring, qlist<question>); qstring getname() const; qstring gettext() const; qlist<question>* gettest() const; friend qdatastream &operator<<(qdatastream &out, const lesson &l){ out << l.getname() << l.gettext(); out << l.gettest(); return out; } friend qdatastream &operator>>(qdatastream &in, lesson &l){ qstring name; qstring text; qlist<question> t; in >> name >> text >> t; l = lesson(name, text, t); return in; } friend qdatastream &operator<<(qdatastream &out, const lesson *&l){ out << l...
Read more

Read video using VideoReader function in Matlab? -

-
i want read video folder , extract frames it.i used vidoereader function.but gives error.my code shown below along error. mov=videoreader('11.mp4'); vidframes=read(mov); nframes=mov.numberofframes; i=1:nframes imshow(vidframes(:,:,i),[]); end and error show given below error using videoreader/init file not appear have video data. error in videoreader (line 147) obj.init(filename); error in video (line 7) mov=videoreader('11.mp4'); i think matlab version related problem. faced same problem when using matlab 2013a . however, when changed matlab 2014b problem disappeared.
Read more