Databases
StackOverflow2013
Postsdbo
POCreate a div with a triangular pointer on the left
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreate a div with a triangular pointer on the left
    text
    copied!<p>I need to create a non rectangular div in HTML.</p> <p>The problem is, both of them are transparent with background. Also, the image inside that div is also a slide show rotating between a set of images.</p> <p><img src="https://i.stack.imgur.com/ZcUWw.jpg" alt="layout example"></p> <p>The big image should be rotating. That part is easy enough. The hardest part is that triangle that points to miscellaneous, that is transparent to the rotating picture. And that pointer moves. In this example, this is image set that correspond to miscellaneous. When user click on Food Packing, the pointer must move to point to Food Packing</p> <p>Any idea how to cut the image to that triangle and keep the color transparent to img, while other parts are transparent to panel background-image? </p> <p>HTML:</p> <pre><code>&lt;div ng-controller="rotatorController" id="parent"&gt; &lt;div id="menu" ng-click="loadList($event)"&gt; &lt;ul&gt; &lt;li&gt;Packaging &lt;ul&gt; &lt;li&gt;Food Packing&lt;/li&gt; &lt;li&gt;Non Food Packing&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; Promotional Item &lt;ul&gt; &lt;li&gt;bla bla bla, you got the drift&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div ng-switch on="pic" ng-animate="'animate'" id="rotator" ng-repeat="image in images"&gt; &lt;div ng-switch-when="{{$index + 1}}"&gt;&lt;img ng-src="{{image}}"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>css:</p> <pre><code>div#parent { display: inline-block; height: 570px; width: 800px; padding: 40px; background: rgb(203, 203, 203); background: -moz-linear-gradient(top, rgb(203, 203, 203) 0%, rgb(255, 255, 255) 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(203, 203, 203)), color-stop(50%, rgb(255, 255, 255))); background: -webkit-linear-gradient(top, rgb(203, 203, 203) 0%, rgb(255, 255, 255) 50%); background: -o-linear-gradient(top, rgb(203, 203, 203) 0%, rgb(255, 255, 255) 50%); background: -ms-linear-gradient(top, rgb(203, 203, 203) 0%, rgb(255, 255, 255) 50%); background: linear-gradient(to bottom, rgb(203, 203, 203) 0%, rgb(255, 255, 255) 50%); } div#rotator { height: 500px; width: 450px; float: right; position: absolute; left: 300px; overflow: hidden; } </code></pre> <p>I need div#rotator to be shaped like that Div B above.. rectangle with a little curve pointing to corresponding menu. Any idea on how to create that? </p> <p>In short, images are normal rectangular images, but should be cropped like black div with a pointer showing image set's category.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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