「切」後旋轉的div？

Question

我創建了一個信息工具提示，如：

但它包含的圖像：

和常規股利的權利。 （裏面有文字）

但是，我不喜歡用圖像去做。我想用旋轉div創建三角形部分。

我已經成功通過創建一個簡單的div做here並旋轉：

transform: rotate(45deg); 
    -ms-transform: rotate(45deg); /* IE 9 */ 
    -webkit-transform: rotate(45deg); /* Safari and Chrome */ 

，其結果是：

但是（這是我的問題） - 我可以刪除旋轉的div的右側部分，因此我將只有：

可能嗎？

p.s. - 我知道thtat我可以通過使用另一個相對/絕對位置的div來隱藏div的右邊部分。但我想知道是否有刪除正確部分的解決方案。 （或者，是否有任何代碼可以創建三角形？）。還假設角度是90度。像紅色的div。

Answer 1

你可以做到這一點沒有元素旋轉，這種包裝的位置相對元素中，並用絕對位置來設置它的權利

Demo

.left { 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-right:10px solid #001744; 
}