html - How to add borders on triangle shape with css? -


i realize kind of bubble comic text in when click on button. managed create bubble , triangle points button. not manage apply border or shade triangle. since use transparent border create triangle, when apply box-shadow, creates shadow square , not triangle.

.settings-notification {  position: absolute;  display: block;  background: white;  z-index: 999;  box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 6px 9px rgba(0,0,0,.2);  padding: 4px;  margin-top: 17px;  margin-left: 25px;  }    #settings-notification:before {  content:"";  position: absolute;  border-left: 10px solid transparent;  border-right: 10px solid transparent;  border-bottom: 20px solid white;  top: -20px;  right: 6px;  }
<div class="settings-notification"     id="settings-notification">  <div class="sound-signal">    signal sonore :    <input type="radio" name="soundsignal" id="soundsignal">    <label for="soundsignal">oui</label>    <input type="radio" name="soundsignal">    <label for="soundsignal">non</label>  </div>    <div class="flash-signal">    signal visuel :    <input type="radio" name="flashsignal" id="flashsignal">    <label for="flashsignal">oui</label>    <input type="radio" name="flashsignal">    <label for="flashsignal">non</label>  </div>

thanks :)

since borders used on ::before can't add any, adding box-shadow doesn't work either if want take on triangles edges.

i've come solution try : https://jsfiddle.net/lindow/7vvtx516/

add html below inside #settings-notification div :

<div class="tr triangle">     <div class="tr inner-triangle"></div> </div>

you need 2 triangles, 1 on top of other, css :

.tr {   position: absolute;   border-left: 10px solid transparent;   border-right: 10px solid transparent; }  .triangle {   z-index:2;   border-bottom: 20px solid #ccc;   top: -20px;   right: 6px; }  .inner-triangle {   z-index:1;   border-bottom: 23px solid #ffffff;   right: -10px; }

what else changed in code ?

.settings-notification {     + position: relative; /* contains div absolute position */     + width:220px;         }  - .settings-notification::before {...} /* removed */

Comments

Post a Comment

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

while performing simple hover test on firefox through selenium (3.4.0) python bindings (3.4.3) using of available os in saucelabs (except linux, latest available firefox version old), performing following actionchain: hover = actionchains(driver) hover.move_to_element(elm_men_menu).perform() it throws following error: taceback: file [...] in testhover hover.perform() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 80, in perform action() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 290, in <lambda> command.move_to, {'element': to_element.id})) file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/remote/webdriver.py", line 256, in execute self.error_handler.check_response(response) file "/usr/local/lib/python2.7/...
Read more

html - How to custom Bootstrap grid height? -

why bootstrap grid has height 591.067 ? did height came ? .main-post { padding: 20px; background-color: #fff; border: 1px solid #d8d8d8; margin-bottom: 100px; } .main-post .post-categories { margin-bottom: 10px } .main-post h3 { margin: 0 0 10px; color: #777; letter-spacing: -1px; font-weight: bold } .main-post .post-author, .main-post .post-date, .main-post .post-comments { font-size: 12px } .main-post img { display: block; margin: 10px 0; } .main-post .post-summary { line-height: 1.7; color: #888 } .main-post { color: #999 } <div class="col-sm-6"> <div class="main-post"> <h3 class="post-title"> <a href="#"> post title </a> </...
Read more

transpose - Maple isnt executing function but prints function term -

im using maple im in worksheetmode tried using maple input , 2d input , want transpose matrix a: := `<|>`(`<,>`(1, .5, -2), `<,>`(.5, 9/4+b, 5+3*b), `<,>`(-2, 5+3*b, 18+9*b+4*a)); b:= transpose(a); when exectute sheet dont translated values, there same input. matrix looks same input matrix plus function term. you can see picture in following link: why arent functions executed? meanwhile b:=a^+ doing right way , transposed matrix. other functions return function body instead needed values... if using 2d input mode (the default) space you've got between transpose , bracketed (b) interpreted multiplcation. rid of such space. also, either load package @ start of document like, with(linearalgebra): before calling transpose command package, or call it's full name like, linearalgebra:-transpose(b);
Read more