good day

Help with some modifications of css for the required functionality:

Made the following example: https://jsfiddle.net/4qkxs7a1/1/

.ib-outline { width: calc(100% - 2 * 10px /*h-borders*/ - 2 * 10px /*h-margins*/); max-width: 500px; margin: 0px 10px 15px 10px; border: 0px solid #ffffff; box-shadow: 0px 0px 3px rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.25); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.25); } .ib-storage { position: relative; width: 100%; background: #ffffff; } .ib-storage-title { display: inline-block; vertical-align: top; position: relative; width: calc(100% - 100px - (2 * 2px) - (25px + 10px)); height: 50px; line-height: 50px; margin: 0px; padding: 0px 10px 0px 25px; text-align: left; font-family: Verdana; font-size: 20px; border: 2px solid #0090d0; border-right: 1px solid #0090d0; background: #ffffff; cursor: pointer; } .ib-storage-title:before, .ib-storage-title:after { content: ''; position: absolute; width: 0px; height: 0px; } .ib-storage-title:before { top: -2px; right: -16px; border-bottom: 27px solid transparent; border-top: 27px solid transparent; border-left: 15px solid #0090d0; } .ib-storage-title:after { top: 0px; right: -14px; border-bottom: 25px solid transparent; border-top: 25px solid transparent; border-left: 14px solid #ffffff; } .ib-storage-title:hover { border: 2px solid #0090d0; border-right: 2px solid #0090d0; } .ib-storage-title:hover:before { top: calc(100% + 1px); left: calc(50% - 27px); border-left: 27px solid transparent; border-right: 27px solid transparent; border-top: 15px solid #0090d0; } .ib-storage-title:hover:after { top: calc(100% - 1px + 1px); left: calc(50% - 27px + 2px); border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 14px solid #ffffff; } .ib-content { display: inline-block; vertical-align: top; width: calc(100px - 2 * 2px - 2 * 2px); height: 50px; line-height: 50px; border: 2px solid red; border-right: 1px solid red; background: #ffffff; } .ib-content:before, .ib-content:after { content: ''; position: absolute; width: 0px; height: 0px; } .ib-content:before { top: 0px; right: -13px; border-bottom: 27px solid transparent; border-top: 27px solid transparent; border-left: 15px solid red; } .ib-content:after { top: 2px; right: -11px; border-bottom: 25px solid transparent; border-top: 25px solid transparent; border-left: 14px solid #ffffff; }

There is a block (ib-outline) containing another block (ib-storage), inside of which there are 2 blocks (ib-storage-title and ib-content) (this attachment was made for compatibility with older browsers that did not support the correct outline property )

enter image description here

 <div class="ib-outline"> <div class="ib-storage"> <div class="ib-storage-title">ЗАГОЛОВОК ТЕМЫ</div> <div class="ib-content"> </div> </div> </div>

I want to implement css so that it is (see jsfidder):

1) 2 rectangles and each on the right an arrow / corner looking to the right

I implemented, then the second block (ib-content) didn’t come close to the first block (ib-storage-title), and I can’t understand why it happened, aligning through absolute positioning is not the best way and I would like an automatic solution (such as using display: inline-block should have helped but did not help)

2) when you hover on the first block, the arrow to the right changes to a down arrow

Released

QUESTIONS

3) How to correct the mistake that when you hover with the mouse on the right arrow of the ib-storage-title block, then the arrow disappears and the lower arrow appears and immediately returns everything back, as a result a very nasty blink appears?

I understand the reason - the state "there is an object / no object / there is an object" changes, but how to fix it, for example, how to set in css, that pointing to the arrow (objects :before and :after ) should not be perceived as pointing to the main object ib-storage-title .

4) How can you set the effect that when you hover on an ib-storage-title object, the right arrow first disappears (it is pulled into the object, i.e.

 border-left: 15px solid #0090d0;

15px is reduced to 0px, and then the lower arrow comes out, i.e. at

 border-top: 15px solid #0090d0;

0px increases to 15px?

The transtition property transtition not help - it gives out game instead of the desired effect.

5) a shadow is added for the parent ib-outline block, and can it be made for arrows / corners?

When I try to insert a shadow code, a shadow appears around a rectangle in which a corner is inscribed, which is understandable, but can I somehow get around this?

    1 answer 1

    We managed to solve some problems:

    https://jsfiddle.net/3dtp5tyx/

    1) to eliminate the flashing when hovering over the elements .ib-storage-title:before , .ib-storage-title:after (because these elements are moved to another place and as a result of which they are immediately moved back) the handler :hover on these elements is disabled through property pointer-events: none; , and for hover items turned it back on pointer-events: auto;

    2) implemented a smooth animation of the right element through tracking changes in the element width (since everything is tied to the width) through the transition: width 0.1s; property transition: width 0.1s;

    3) exclude line feed (\ r \ n) from html code so that 2 .ib-storage-title and .ib-content can stand together without any line feed, i.e. instead of <div></div><div></div> , you could use it like this: <div></div>\r\n<div></div> could get rid of using the font-size: 0px; property font-size: 0px;

    Perhaps it worked, because the positioning did more accurately, did not work before.

    What has not yet been fixed

    1) animation of the appearance of a corner in the left block so that it smoothly retracts from one side and extends into the other (sequentially)

    As I understand, it would have been easy to do if the corner had not changed its position, but for two corners (on the side and bottom), then you need to use another <div> element which is not present or embed it in the .ib-storage-title <span> or use .ib-storage , but this is not entirely appropriate

    The code itself:

     .ib-outline { width: calc(100% - 2 * 10px /*h-borders*/ - 2 * 10px /*h-margins*/); max-width: 400px; margin: 0px 10px 15px 10px; _border: 0px solid #ffffff; /* box-shadow: 0px 0px 3px rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.25); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);*/ } .ib-storage { position: relative; width: 100%; background: #ffffff; font-size: 0px; } .ib-storage-title, .ib-content { cursor: pointer; display: inline-block; vertical-align: top; position: relative; height: 50px; line-height: 50px; margin: 0px; background: #ffffff; } .ib-storage-title { width: calc(100% - 100px - (1px + 2px) - (25px + 10px)); padding: 0px 10px 0px 25px; border: 2px solid #409280; border-right-width: 1px; text-align: left; font-family: Verdana; font-size: 20px; } .ib-storage-title:before, .ib-storage-title:after { content: ''; position: absolute; z-index: 2; width: 0px; height: 0px; border: 0px solid transparent; pointer-events: none; } .ib-storage-title:before { top: -2px; right: -16px; border-bottom: 27px solid transparent; border-top: 27px solid transparent; border-left: 15px solid #409280; } .ib-storage-title:after { top: 0px; right: -14px; border-bottom: 25px solid transparent; border-top: 25px solid transparent; border-left: 14px solid #ffffff; } .ib-storage-title:hover { width: calc(100% - 100px - (2px + 2px) - (25px + 10px)); border: 2px solid #409280; border-right: 2px solid #409280; } .ib-storage-title:hover:before, .ib-storage-title:hover:after { border: 0px solid transparent; pointer-events: auto; } .ib-storage-title:hover:before { top: calc(100% + 1px); left: calc(50% - 27px); border-left: 27px solid transparent; border-right: 27px solid transparent; border-top: 15px solid #409280; } .ib-storage-title:hover:after { top: calc(100% - 1px + 1px); left: calc(50% - 27px + 2px); border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 14px solid #ffffff; } .ib-content { width: calc(100px - (1px + 0px) - 15px - 5px); border: 2px solid #0090d0; border-left: 0px; border-right-width: 1px; transition: width 0.1s; } .ib-content:before, .ib-content:after { content: ''; position: absolute; width: 0px; height: 0px; } .ib-content:before { top: -2px; right: -16px; border-bottom: 27px solid transparent; border-top: 27px solid transparent; border-left: 15px solid #0090d0; } .ib-content:after { top: 0px; right: -14px; border-bottom: 25px solid transparent; border-top: 25px solid transparent; border-left: 14px solid #ffffff; } .ib-content:hover { width: calc(100px - (1px + 0px) - 15px - 0px); }