This is my unique code snippet
CSS
#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;
}
HTML
<body dir="rtl">
<div id="page">
<div id="bothcontainer">
<div id="littlebox1" class="littlebox1-sentence">put your mouse here</div>
<div id="littlebox1" class="triangle"></div>
</div>
<div id="box1"></div>
</div>
I am looking to enhance the style of the triangle by adding a border to the .littlebox1-sentence element.
The border will remain consistent in color.
Although I am getting closer to my desired outcome, there are still tweaks needed in my implementation.