CSS Triangles and the Details Element


by Jeremy Caudle
code

I cannot remember if I've ever made triangles or arrows with CSS before, so I thought I'd give that a shot today. I saw them mentioned in an article on CSS Tricks that talked about animating the arrow in the summary element. I took a shot at that as well.

Summary of things below

Suspendisse at venenatis tortor. Pellentesque vitae vestibulum arcu. Donec in vestibulum turpis. Sed euismod enim nec purus faucibus mattis. Curabitur est est, ultricies non mollis finibus, tincidunt vel ipsum. Praesent at ante vel eros fermentum vestibulum in id mi. Donec imperdiet elementum velit, eu ultrices purus pellentesque consectetur. Fusce eget metus quis lorem mollis elementum vel in velit. Cras aliquet, libero nec eleifend eleifend, sapien magna cursus ipsum, semper viverra erat risus interdum nisi. Maecenas porta et metus quis fringilla.

View the code:

HTML and JS 
<div class="code-block">

            <div class="flex-row-even">
                <div class="arrow-down"></div>
                <div class="arrow-up"></div>
                <div class="arrow-left"></div>
                <div class="arrow-right"></div>
            </div>

            <details>
                <summary>Summary of things below</summary>
                <div class="summary-content">
                    <p>Suspendisse at venenatis tortor. Pellentesque vitae vestibulum arcu. Donec in vestibulum turpis. Sed euismod enim nec purus faucibus mattis. Curabitur est est, ultricies non mollis finibus, tincidunt vel ipsum. Praesent at ante vel eros fermentum vestibulum in id mi. Donec imperdiet elementum velit, eu ultrices purus pellentesque consectetur. Fusce eget metus quis lorem mollis elementum vel in velit. Cras aliquet, libero nec eleifend eleifend, sapien magna cursus ipsum, semper viverra erat risus interdum nisi. Maecenas porta et metus quis fringilla.</p>
                </div>
            </details>

        </div>
CSS 
.code-block {
                background-image: linear-gradient(white, #efefef);
                min-height: 60vh;
                margin: 2rem auto;
								padding-bottom: 1rem;
                width: clamp(10em, 90vw, 60em);
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            }

            .arrow-up, .arrow-down, .arrow-left, .arrow-right {
                width: 0;
                height: 0;
            }

            .arrow-up {
                border-left: 1rem solid transparent;
                border-right: 1rem solid transparent;
                border-bottom: 1rem solid black;
            }

            .arrow-down {
                border-left: 1rem solid transparent;
                border-right: 1rem solid transparent;
                border-top: 1rem solid black;
            }

            .arrow-left {
                border-top: 1rem solid transparent;
                border-bottom: 1rem solid transparent;
                border-right: 1rem solid black;
            }

            .arrow-right {
                border-top: 1rem solid transparent;
                border-bottom: 1rem solid transparent;
                border-left: 1rem solid black;
            }

            .code-block details {
                border-radius: .25rem;
                border: 1px solid rgba(0,0,0,0.125);
                padding: .25rem;
                margin: 1rem;
                transition: height 1s ease-out;
            }

            .code-block details > summary::marker {
                display: none;
                color: transparent;
            }

            .code-block details > summary::-webkit-details-marker {
                display: none;
            }

            .code-block details summary::before {
                display: inline-block;
                content: "";
                width:0;
                height: 0;
                border-top: 7px solid transparent;
                border-bottom: 7px solid transparent;
                border-left: 7px solid black;
                margin-right: 5px;
                transition: transform .125s linear;
            }

            .code-block details[open] > summary::before {
                transform: rotate(90deg);
            }

            .code-block summary {
                cursor: pointer;
            }

            .summary-content {
                padding: 0 1rem;
            }

            .code-block summary:hover, .code-block summary:focus {
                color: rgb(7, 8, 20);
            }

            @supports (display:flex) {
                .flex-row-even {
                    display: flex;
                    flex-flow: row;
                    justify-content: space-evenly;
                }
                .flex-row-even div {
                    margin: 0 .25rem;
                }
            }

Tags