css - Dynamic & Responsive Trapezoid Text Div -


this question has answer here:

i'm stuck on special design, need effect, keeping in mind text changed (since it's wordpress website) on 1 or many lines. http://postimg.org/image/ibqntp9t1/ achieved effect using pseudo elements , here code : css:

       .box {         background-color: #000;     }      .box:before {         content:'';         border-top: 100px solid transparent;         border-right: 28px solid #000;         width: 0px;         height: 0px;         position: absolute;         top:0px;         left: -13px;     }

the problem when content changes (example: 1 line of text), height of "before" thing not change ... ? thanks

edit: solution provided below isn't working (not working on firefox)

if values in em pseudo-element border triangle react changes in font size.

.box {    background-color: #000;    color: white;    display: inline-block;    position: relative;    line-height: 2em;    padding: 0 1em;    margin: 0 2em;    vertical-align: top;  }  .box:before {    content: '';    border: 1em solid transparent;    border-right-color: #000;    border-bottom-color: #000;    width: 0px;    height: 0px;    position: absolute;    right: 100%;    top: 0;  }  .larger {    font-size: 24px;  }
<div class="box">standard</div>  <div class="box larger">i'm larger</div>

building on excellent answer @stewartside, clip path can applied pseudo-element.

.box {    background-color: #000;    color: white;    display: inline-block;    max-width: 250px;    position: relative;    line-height: 2em;    padding: 0 1em;    margin: 0 2em;    vertical-align: top;  }  .larger {    font-size: 24px;  }  .box:before {    content: '';    background: inherit;    width: 2em;    height: 100%;    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0% 100%);    clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0% 100%);    position: absolute;    right: 100%;    top: 0;    margin-right:-1px; /* tweak due antialias issue ? */  }
<div class="box">lorem</div>  <div class="box larger">lorem ipsum dolor sit amet.</div>


Comments

Post a Comment

Popular posts from this blog

android - Pass an Serializable object in AIDL -

i have defined aidl file interface imyfeature { void dotask(class clazz); } but need pass class object process. possible in android? if so, how? i tried: interface imyfeature { serializable class; void dotask(class clazz); } but doesn’t work. aidl in android supports custom class implement parcelable interface. in case want send class object not possible. can send class canonical name , retrieve in service. for example have aidl file interface imyfeature { void dotask(string classname); } then call : binder.dotask(myclass.class.getcanonicalname()); and in service binder stub implementation : private final imyfeature mbinder = new imyfeature.stub() { public void dotask(string classname) { try { class<?> clazz = class.forname(classname); constructor<?> ctor = clazz.getconstructor((class[]) null); object object = ctor.newinstance(); ...
Read more

How to provide Authorization & Authentication using Asp.net, C#? -

Image
i have asp.net application in c#. i have provide page authorization specific user/usergroup. i have created 2 tables in database: 1) pagename 2)permissions[insert, update, view, delete] but i'm unable match tables , permissions assigning... can 1 please me, how created tables in database , how coding. please me. you can below explanation. configure access specific file , folder, set forms-based authentication. request page in application redirected logon.aspx automatically. in web.config file, type or paste following code. this code grants users access default1.aspx page , subdir1 folder . <configuration> <system.web> <authentication mode="forms" > <forms loginurl="login.aspx" name=".aspnetauth" protection="none" path="/" timeout="20" > </forms> </authentication> <!-- section denies access files in...
Read more

How to use Authorization & Authentication in Asp.net, C#? -

i using roll management , trying give page , folder access according user or user group, using server created ad group user authentication. i have default1.aspx page default , subdir1 folder give different access separate user group i using below logic in web.config. <location path="subdir1"> <system.web> <authorization> <allow users ="?" /> </authorization> </system.web> </location> i facing problem provide same access 2 or more directory same user should have provide allow user code twice both folder? i can use logic repeating value folder want access providing in 1 logic. i have got answer configure folder/page access, have make different access shown below.. configure access specific file , folder, set forms-based authentication. request page in application redirected logon.aspx automatically. in web.config file, done following code. this code grants user...
Read more