用 CSS 寫出方形不太困難，但寫出三角形真的是滿酷的一件事情，
不用圖片本身去製作，而是直接用 CSS 來製作三角形的遮罩感，
想要呈現的如下圖:

這次算是學到了一點新東西，HTML 這次完全沒有更動，
(好啦~其實有更動中文假字的部分，因為我耍白癡，忘了調整瀏覽器的百分比，一直維持在 50%，想說畫面看起來怎麼這麼會這麼多字...)

這次CSS增加了幾個地方，如中文所示，原本 .card 的設定也改成用像素編寫

.card {
    width: 385px;
    margin: 15px;
    background-color: #fff;
    border: 1px solid #a8a8a8;

    img {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
        // 在圖片中置中對齊
    }

    h2 {
        font-size: 24px;
        font-weight: bold;
        border-bottom: 1px solid #333333;
        padding-bottom: 1em;
        margin-bottom: 1em;
        text-align: center;
    }

    P {
        line-height: 1.5;
        text-align: left;

    }

    .text {
        padding: 1em;
        position: relative;
        // 設定絕對定位的父元素在卡片的文字中

        &:before {
            content: '';
            //偽元素要搭配 content 不然會失效
            width: 0;
            height: 0;
            position: absolute;
            // 用絕對定位，將 display 轉為 Block
            left: 0;
            top: 0;
            // 讓三角形在定位中靠左靠上對齊
            border-top: 50px solid transparent;
            // 設定線條為transparent透明
            border-left: 184px solid #fff;
            border-right: 184px solid #fff;
            // 將左右的線條改為白色
            transform: translateY(-100%);
            // 使用變形然後位移-100%
        }
    }

}

比較重要的是增加絕對定位的概念，還有「偽元素」的使用，雖然還很菜，但至少學會一招，
transform 我是看卡柏斯老師的這一篇【CSS沒有極限 - CSS transform-origin】

用 CSS 寫三角形真的滿酷的，這一篇基本上就是按照 Amos 老師的寫法找樣參考，順便透過老師的教學理解思維規劃與路徑，滿充實的一次，繼續加油!!

附上 codepen https://codepen.io/hnzxewqw/pen/GRKLaoQ
建議可以轉換成 full page view view 會比較完整呈現頁面~