Note that there are some explanatory texts on larger screens.

plurals
  1. POAdd border to triangle element in css3
    primarykey
    data
    text
    <p>This is my code</p> <p>CSS</p> <pre><code>#page { width: 900px; padding: 0px; margin: 0 auto; direction: rtl; position: relative; } #box1 { position: relative; width: 500px; border: 1px solid black; box-shadow: -3px 8px 34px #808080; border-radius: 20px; box-shadow: -8px 5px 5px #888888; right: 300px; top: 250px; text-align: justify; -webkit-transition: all .75s; font-size: large; color: Black; padding: 10px; background: #D0D0D0; opacity: 0; } @-webkit-keyframes myFirst { 0% { right: 300px; top: 160px; background: #D0D0D0; opacity: 0; } 100% { background: #909090; :; right: 300px; top: 200px; opacity: 1; } } #littlebox1 { top: 200px; position: absolute; display: inline-block; } .littlebox1-sentence { font-size: large; padding-bottom: 15px; padding-top: 15px; padding-left: 25px; padding-right: 10px; background: #D0D0D0; border-top-right-radius: 10px; border-bottom-right-radius: 10px; -webkit-transition: background .25s ease-in-out; } #bothcontainer:hover ~ #box1 { -webkit-transition: all 0s; background: #909090; :; right: 300px; top: 200px; -webkit-animation: myFirst .75s; -webkit-animation-fill-mode: initial; opacity: 1; } #bothcontainer:hover .littlebox1-sentence { background: #909090 } #bothcontainer:hover .triangle { border-right: 25px solid #909090 } .triangle { position: relative; width: 0; height: 0; border-right: 25px solid #D0D0D0; border-top: 27px solid transparent; border-bottom: 24px solid transparent; right: 184px; -webkit-transition: border-right .25s ease-in-out; } </code></pre> <p>HTML</p> <pre><code>&lt;body dir="rtl"&gt; &lt;div id="page"&gt; &lt;div id="bothcontainer"&gt; &lt;div id="littlebox1" class="littlebox1-sentence"&gt;put your mouse here&lt;/div&gt; &lt;div id="littlebox1" class="triangle"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="box1"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>I want to add a border to the triangle, to <code>.littlebox1-sentence</code>.</p> <p>The border will <em>not</em> change its color.</p> <p><a href="http://jsfiddle.net/gp43Q/" rel="nofollow">Here is a fiddle</a></p> <hr> <p>I have come closer to finding the solution, but it still is not where I want it.</p> <p><a href="http://jsfiddle.net/DyxA4/3/" rel="nofollow">Fiddle</a> </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload