CSS畫斜線邊框

-2

我在網頁設計沒有太多的經驗，我只是想寫一個CSS 來獲得了把類似於這樣 CSS畫斜線邊框

誰能幫助我實現這種使用css的頭文件

來源

2017-06-20 Pawan Kumar Prasad

你嘗試過這麼遠嗎？你在哪裏編碼？ https://stackoverflow.com/help/mcve – disinfor

這麼多的問題已經問過同樣的..請使用谷歌 – vsync

-1

下面是一個如何實現的例子。

.root { 
 
    border: 1px solid gray; 
 
    background-color: yellow; 
 
    width: 100%; 
 
    height: 200px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.slash { 
 
    width: 200%; 
 
    height: 200%; 
 
    background-color: white; 
 
    border: 5px solid gray; 
 
    transform: rotate(45deg) translateY(100%); 
 
}

<div class="root"> 
 
    <div class="slash"></div> 
 
</div>

https://jsfiddle.net/0tgwa6xn/

來源

2017-06-20 18:33:19 QuestionAndAnswer

它不是通用的。 OP提供了他們試圖實現的一個例子。這是一個傾斜的邊界。他們是否應該包含一些代碼，即迄今爲止他們嘗試過的代碼，是的。 – hungerstar

感謝您的回覆，我需要繪製類似於附加圖片的內容。我對css很新，所以如果你能幫我編寫css來獲得像圖片 –

@ user3423144那樣的樣式，我已經更新了我的答案，所以你可以看看其中的一個解決方案。 – QuestionAndAnswer

你試過transform: skewX() 它歪斜的對象在一定程度上。我喜歡在css中使用轉換，因爲我可以操縱div，我喜歡它，它需要一些時間來適應它，它如何工作，但你應該玩它，看看它是否適合你。這裏是變換的更多信息：https://www.w3schools.com/cssref/css3_pr_transform.asp

，我在這裏做一個例子： https://jsfiddle.net/4r3mqctp/1/

希望這有助於

來源

2017-06-20 18:52:55

CSS畫斜線邊框

回答

相關問題