如何剪切文本右下角的背景颜色答案

【问题标题】：How to cut the background color at the bottom right corner of the text如何剪切文本右下角的背景颜色
【发布时间】：2018-11-08 16:10:28
【问题描述】：

我在剪切文本右下角的背景颜色时遇到问题。有谁能帮助我吗？我设法用Javascript实现了它，但由于每个单词的跨度问题，我的老板不接受我的解决方案，所以我希望有人可以在没有javascript的情况下帮助css，或者如果有javascript需要针对id而不是跨度，因为在sitecore中他们决定他们是否要选择 h1、h2、h3 等等。这是链接：

#bigHeadline,
#smallHeadline{
  display: inline;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    float: left;
}

#bigHeadline{
  -webkit-padding-end: 5%;
    -moz-padding-end: 5%;
    padding-inline-end: 5%;
    font-size: 46px;
    line-height: 58px;
    padding: 0 15px;
    float: left;
    font-weight: 200;
    margin: 0;
    text-transform: uppercase;
    color: #fff;
    width: 630px;
    background-color: rgba(0,0,0,.7);
    font-family: Roboto; 
    font-weight: 200;
  
}
#smallHeadline{
      padding: 0 15px;
    margin: 0;
    background-color: rgba(0,0,0,.7);
    font-family: Roboto;
    font-size: 22px;
    line-height: 33px;
    color: #fff;
    text-transform: uppercase;
    font-family: Roboto;
    font-weight: 200;
  
}

 <!DOCTYPE html>
    <html>
    <head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>

    <div class="c-imagebox-headlines">
      <div class="c-imagebox-headlines-tm-35">
        <h3 id="smallHeadline">Headline 1</h3>
        <br> 
        
        <h1 id="bigHeadline">Once upon a time in the west and east </h1>
        <br> 
        <h2 id="smallHeadline">SAVE <span class="service-texts">Kroner</span>&nbsp;<span>100,-</span> if you book online.</h2>
        </div>
    </div>
      
      
      </body>
    </html>

我尝试了不同类型的解决方案来禁用 javascript 并从剪辑路径、边框半径使用，但我在定位右下角区域时确实遇到了困难，请帮助我。红色是我要剪辑的区域。

【问题讨论】：

发布的问题似乎根本没有包含any attempt 来解决问题。 StackOverflow 希望您首先try to solve 您自己的问题，因为您的尝试有助于我们更好地了解您想要什么。请编辑问题以显示您尝试过的内容，以说明您在Minimal, Complete, and Verifiable example 中遇到的具体问题。
不太可能你真的想要一个剪辑路径或类似的东西。更有可能你只是想让包含这个特定文本的元素成为 inline 元素，以便它的轮廓跟随文本，而不是整个元素创建一个 block。
嗨@ankit，我尝试了使用Javascript的解决方案，但我的老板不接受这个想法，因为每个单词都有跨度链接jsfiddle.net/vg4z239a/8/#&togetherjs=9vwzFCjxTK
@misorude 我尝试了剪辑路径，但它从上到下切割黑色边我只需要从东字切割右下角直到结束，与上面的红色相同
@misorude 是链接，在我的第三个解决方案中，我删除了 javascript，并试图找出如何剪辑背景，如果你能帮助我，我将不胜感激。 jsfiddle.net/vg4z239a/8/#&togetherjs=9vwzFCjxTK

标签： javascript css border clip-path

【解决方案1】：

这不是一个简单的问题，因为您应该开发一个解析器，它以正确的方式使用<br/> 切割您的字符串（不切割一个单词，或将<br/> 放在逗号/点/任何符号之前） .您应该获取父容器.c-imagebox-headlines-tm-35的宽度，然后根据h1的字体大小计算最大字数，并使字数和字号的最佳近似值。对于一个愚蠢的问题，这是一个艰难的解决方案。

也许你可以试试这个帖子Auto-sizing text to fit container

【讨论】：

感谢您的链接，是的，我同意这不是一个简单的问题，因为我已经为此花费了很多时间