<body>
<div>
<i></i>
<p><span>昔ながらのmarquee的な吹き出し昔ながらのmarquee的な吹き出し</span></p>
</div>
</body>
body {
background: url(https://source.unsplash.com/random) no-repeat 50% 50% / cover;
}
div {
position: relative;
display: block;
width: 500px;
margin: 100px auto;
}
p {
overflow: hidden;
padding: 15px 10px 10px 10px;
color: #333;
background: rgba(255,255,255,0.6);
border: 1px solid #369;
border-bottom: none;
border-radius: 5px 5px 0 0;
}
i,
i:before,
i:after,
div:before,
div:after {
content: "";
position: absolute;
display: block;
}
div:before {
left: 0;
bottom: -6px;
width: 245px;
height: 5px;
border-radius: 0 0 0 5px;
border-bottom: 1px solid #369;
border-left: 1px solid #369;
background: rgba(255,255,255,0.6);
}
div:after {
right: 0;
bottom: -6px;
width: 245px;
height: 5px;
border-radius: 0 0 5px 0;
border-bottom: 1px solid #369;
border-right: 1px solid #369;
background: rgba(255,255,255,0.6);
}
i {
line-height: 0;
font-size: 0;
bottom: -5px;
left: calc(50% - 4px);
display: block;
width: 8px;
height: 5px;
background: rgba(255,255,255,0.6);
}
i:before {
top: 5px;
left: calc(50% - 5px);
width: 0;
height: 0;
border: 5px solid transparent;
border-top: 6px solid rgba(255,255,255,0.6);
}
i:after {
top: 2px;
left: 0;
width: 7px;
height: 7px;
border-right: 1px solid #369;
border-bottom: 1px solid #369;
transform: rotate(45deg);
}
p {
overflow: hidden;
}
span {
display: block;
overflow: hidden;
animation: marquee 10s linear 0s infinite;
}
@keyframes marquee {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
Also see: Tab Triggers