使用angularJS和Bootstrap斜條紋

Question

有沒有方法使用angularJS和Bootstrap創建這樣的斜條紋？

Answer 1

你可以這樣做，只有使用CSS：

HTML：

<div class="rectangle"> 
    <div class="strip-container"> 
    <div class="strip">Sample Text</div> 
    </div>  
</div> 

CSS：

.rectangle{ 
    margin: auto; 
    width: 200px; 
    height: 300px; 
    position: relative; 
    border: 1px solid #4B88CB; 
} 
.strip-container{ 
    overflow: hidden; 
    width: 200px; 
    height: 200px; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 
.strip{ 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    display: block; 
    position: absolute; 
    right: -100px; 
    top: 20px; 
    padding: 20px 100px; 
    font-weight: bold; 
    text-transform: uppercase; 
    white-space: nowrap; 
    text-align: center; 
    background: #4B88CB; 
    color: #000; 
    font-size: 12px; 
} 

CHECK THE DEMO

Answer 2

你可以爲這樣的事情

此解決方案的優點是隻需將條紋的寬度（可能是固定的）和平移的頂部偏移（50％，偏移量）作爲設置值，即可減少「幻數」。

HTML

<div class="container"> 
    <div class="stripe"> 
    <p> 
     Sample Text 
    </p> 
    </div> 
</div> 

CSS

.container 
{ 
    position: relative; 
    width: 200px; 
    height: 400px; 
    border: 1px solid black; 
    overflow: hidden; 
} 

.stripe 
{ 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    height: 64px; 
    width: 100%; 
    background-color: blue; 
    text-align: center; 
    transform: rotate(45deg) translate(50%, 32px); 
    transform-origin: 100% 0px; 
} 

看到https://jsfiddle.net/Aides/58mryy97/